訂單不起作用Bootstrap v4.0.0-beta.2

Question

我有兩個div col-lg-5 。 當視圖端口更改為移動設備時，我想首先將第二個div作為順序。 我在v4.0.0-beta.2中使用Bootstrap order-* class。

<div class="col-lg-5 col-12 order-col-12">
    [first_div]
</div>

<div class="col-lg-5  background-10 col-12  order-col-1">
    [second_div]
</div>

但是在使用col小型設備中，這應該改變如下：

<div class="col-lg-5  background-10 col-12  order-col-1">
    [second_div]
</div>

<div class="col-lg-5 col-12 order-col-12">
    [first_div]
</div>

但它沒有改變，它仍然保持相同的順序。

Answer 1

我認為最簡單的解決方案是在第二個div上使用order-first order-lg-2類。 當然，如果您希望在除lg之外的制動點更改列順序，那么您也可以使用其中一個可用的.order{-sm|-md|-lg|-xl}-2類。

正如.order-first實際設置order: -1為第二個div，它保證第二個div在視覺上是第一個div，因此不需要在第一個div上明確設置順序。 （ .order-1不會出現這種情況！）
此外，由於Bootstrap具有移動優先思維模式，我們必須添加.order{-sm|-md|-lg|-xl}-2類之一，以在更寬的屏幕上設置列的“原始”排序。

 <div class="container"> <div class="row"> <div class="col-lg-5"> [first_div] </div> <div class="col-lg-5 order-first order-lg-2"> [second_div] </div> </div> </div> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

注意：肯定你有，但你的實際例子錯過了.row並正確格式化.container - 包裝器。 .row對於完成這項工作非常重要。

Answer 2

編輯回答。

我知道了。 Bootstrap 4假設您正在為最小的設備屏幕（xs）進行開發，因此order-1旨在用於最小的設備（xs）。 order-sm-1表示對大小> = sm的所有設備使用它。 因此，您必須從最小設備（移動設備）的訂單開始。 因此，您需要將第二個div中的內容設置為第一個div中的內容，反之亦然。 然后你告訴bootstrap：如果它是更大或相等的sm大小改變命令order-sm-12 。

總結一下：使用bootstrap 4，您可以從較小的屏幕尺寸（xs）開始開發，並為大於或等於（sm，md，xl）的設備定義斷點。

<div class="row">
  <div class="col-lg-5 col-12 order-sm-12">
    [content_second_div]
  </div>
  <div class="col-lg-5 background-10 col-12  order-sm-1">
    [content_first_div]
 </div>
</div>

有關更多信息，請閱讀此處： https ： //getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints

還要確保<head>包含

 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

訂單不起作用Bootstrap v4.0.0-beta.2

問題描述

2 個解決方案

解決方案1
2 2017-12-16 00:27:47

解決方案2
0 2017-12-10 10:17:31

訂單不起作用Bootstrap v4.0.0-beta.2

問題描述

2 個解決方案

解決方案1 2 2017-12-16 00:27:47

解決方案2 0 2017-12-10 10:17:31

解決方案1
2 2017-12-16 00:27:47

解決方案2
0 2017-12-10 10:17:31