Bootstrap推/拉問題

Question

我對Bootstrap很新，並且在使用push和pull進行元素對齊時會遇到問題。 這是小屏幕尺寸（ xs及以上）的理想結果：

-------------------
|     Search      |
-------------------
|    Directory    |
-------------------
|   Preferences   |
-------------------

然后對於所有尺寸為md及以上的屏幕，我想要這個布局：

-------------------
|  Search  | Pref.|
-------------------
|    Directory    |
-------------------

我已經讀過Bootstrap布局應該是移動優先設計的，所以我的代碼如下：

 .a { background-color: green; } .b { background-color: blue; } .c { background-color: red; } 

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-7 a">Search</div> <div class="col-xs-12 b col-md-push-12">Directory</div> <div class="col-xs-12 col-md-5 c col-md-pull-7">Preferences</div> </div> </div> 

這是我的代碼的Bootply 。 它的工作原理是預期的小屏幕，每個div堆放在正確的順序，但我不明白，為什么push和pull只是運動部件左，右，不加入他們，因為我以為他們會（甚至當我一塌糊塗用於推/拉的列數。 誰能指出我正確的方向？

Answer 1

正如前面提到的那樣，只使用bootstrap類就無法做到這一點。 push ， pull和offset只會水平移動元素，而不是垂直移位。

但是，如果您的目標是支持它的瀏覽器，則可以使用flexbox和媒體查詢的組合來實現此重新排序，而無需復制內容。

支持細分： http ： //caniuse.com/#feat=flexbox

首先，刪除push和pull類並將列包裝在div中。

<div class="container">
  <div class="row">
    <div class="flexBox">
      <div class="a col-xs-12 col-md-7">Search</div>
      <div class="b col-xs-12 ">Directory</div>
      <div class="c col-xs-12 col-md-5">Preferences</div>
    </div>
  </div>
</div>

其次，使用一些CSS規則來設置包裝器div的顯示。

.flexBox
{
    display:flex;
    flex-wrap:wrap;
}

最后，設置一個媒體查詢，一旦寬度高於xs斷點（768px），它將重新排序元素

@media all and ( min-width: 768px ) {
    .flexBox .a { order:1; }
    .flexBox .b { order:3; }
    .flexBox .c { order:2; }
}

完整的例子如下。

 .a { background-color:green; } .b { background-color:blue; } .c { background-color:red; } .flexBox { display:flex; flex-wrap:wrap; } @media all and ( min-width: 768px ) { .flexBox .a { order:1; } .flexBox .b { order:3; } .flexBox .c { order:2; } } 

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="flexBox"> <div class="a col-xs-12 col-md-7">Search</div> <div class="b col-xs-12 ">Directory</div> <div class="c col-xs-12 col-md-5">Preferences</div> </div> </div> </div> 

Answer 2

如果你在不同的屏幕上重新排序結構，這可能會變得非常混亂......只需為電話屏幕單獨設置div。 在Bootstrap 3中使用hidden-（屏幕大小）。引導推拉是水平工作但不是垂直重新對齊（我知道）。 希望這在下面是正確的..我現在一直在使用其他的東西，它已經有一段時間了。

<div class="container">
  <div class="hidden-sm row">
    <div class="col-xs-12 a">Search</div>
    <div class="col-xs-12 b">Directory</div>
    <div class="col-xs-12 c">Preferences</div>
  </div>
    <div class="hidden-xs row">
    <div class="col-sm-7 a">Search</div>
    <div class="col-sm-5 c">Preferences</div>
    <div class="col-sm-12 b">Directory</div>
  </div>
</div>

Answer 3

而是使用推拉，我使用隱藏和可見。 希望下面的代碼有所幫助。

<div class="row">
    <div class="col-xs-12 col-md-6 a">Search</div>
    <div class="col-xs-12 col-md-6 visible-md visible-lg c">Preferences</div>
    <div class="col-xs-12 b">Directory</div>
    <div class="col-xs-12 hidden-md hidden-lg c">Preferences</div>
  </div>