在 Bootstrap 中使用推/拉列更改 div 的顺序 [英] Change order of divs with push/pull column in Bootstrap

问题描述

我正在尝试使用 Bootstrap 更改三列的顺序和跨度，具体取决于设备.

我要这样做:

但我总是以丢失的 div 结束，并且我的真棒应该是空的.这是我最好的尝试，但显然有些不对劲:

<div class="col-xs-12 col-sm-4" style="background:blue; color:white;">标识
<div class="col-xs-12 col-sm-push-8" style="background:red; color:white">照片

<div class="col-xs-12 col-sm-pull-12" style="background:green; color:white">导航

解决方案

如果你想实现这是我现在知道的唯一方法就是没有推/拉方法.

这里是我的代码:

<div class="col-sm-4" style="background:blue; color:white;">标志</div><div class="col-sm-12 visible-xs" style="background:red; color:white;">照片</div><div class="col-sm-8" style="background:green; color:white;">Nav</div><div class="hidden-xs" style="background:red; color:white;">照片</div>

I'm trying to change the order and span of three columns using Bootstrap, depending on the device.

I'm going for this:

But I keep ending up with missing divs, and empty space where my awesome should be. Here is my best attempt, but something is obviously wrong:

<div class="row">

   <div class="col-xs-12 col-sm-4" style="background:blue; color:white;">
      Logo
   </div>

   <div class="col-xs-12 col-sm-push-8" style="background:red; color:white">
      Photo
   </div>

   <div class="col-xs-12 col-sm-pull-12" style="background:green; color:white">
      Nav
   </div>

</div>

解决方案

If you want to achieve this the only way i know in this moment is without push/pull method.

Here is my code:

<div class="col-sm-4" style="background:blue; color:white;">Logo</div>

<div class="col-sm-12 visible-xs" style="background:red; color:white;">Photo</div> 

<div class="col-sm-8" style="background:green; color:white;">Nav</div>

<div class="hidden-xs" style="background:red; color:white;">Photo</div> 

这篇关于在 Bootstrap 中使用推/拉列更改 div 的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！