我有一个关于 bootstrap 4.1 重新排序的问题。根据文档:
Reordering
Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g.,
.order-1
.order-md-2
). Includes support for 1 through 12 across all five grid tiers.
我尝试使用文档中显示的 .order
类仅在中小型屏幕上设置重新排序,但它也会在较大的断点上重新排序内容,我做错了吗?
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-lg-4 order-sm-2">
<!-- some contents here -->
</div>
<div class="col-sm-12 col-lg-8 order-sm-1">
<!-- some contents here -->
</div>
</div>
</div>
最佳答案
你需要在更大的断点重新排序,因为 Bootstrap 是移动优先的方法,(这意味着它在媒体查询中使用 min-width
),所以当只使用 sm
它将应用 sm
及以上的属性(包括 md
和 lg
)。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-lg-4 order-sm-2 order-lg-1">
mobile 2nd and then desktop 1st
</div>
<div class="col-sm-12 col-lg-8 order-sm-1 order-lg-2">
mobile 1st and then desktop 2st
</div>
</div>
</div>
关于 BS4 中的 order
还需要了解的一件事是,您可以使用 order-X-first
、order-X-last
和 order-X-0
,所以这里有一个包含这些类的片段。你可以在这个 answer 中看到它们
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-lg-4 order-sm-last order-lg-first">
mobile 2nd and then desktop 1st
</div>
<div class="col-sm-12 col-lg-8 order-sm-first order-lg-last">
mobile 1st and then desktop 2st
</div>
</div>
</div>
关于html - Bootstrap 4 排序类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51115456/