4

我有两个 div 和col-lg-5. 当查看端口更改为移动设备时，我想先将第二个 div 作为订单。我order-*在 v4.0.0-beta.2 中使用 Bootstrap 类。

<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>

但它没有改变，它保持相同的顺序。

4

2 回答 2

2

我认为最简单的解决方案是使用order-first order-lg-2第二个 div 上的类。当然，如果您希望在 以外的制动点更改列顺序，lg那么您也可以使用可用的.order{-sm|-md|-lg|-xl}-2类之一。

与第二个 div 的.order-first实际设置一样order: -1，它保证第二个 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对于完成这项工作很重要。

于 2017-12-16T00:27:47.277 回答
0

编辑答案。

我懂了。Bootstrap 4 假设您正在为最小的设备屏幕 (xs) 进行开发，因此order-1旨在用于最小的设备 (xs)。order-sm-1 表示将其用于所有尺寸 >= sm 的设备。因此，您必须从订购最小的设备（移动设备）开始。因此，您需要将第二个 div 的内容设置为第一个 div 的内容，反之亦然。然后你告诉引导程序：如果它更大或等于 sm size change order 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">
于 2017-12-10T10:17:31.503 回答