Question

在Bootstrap 3文档中，他们提供了以下使用push和pull类来更改列排序（http://getbootstrap.com/css/#grid-column-ordering）的示例：

<div class="row">
    <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
    <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

我理解这是如何工作的，但为什么你不只是写下你希望它们出现在HTML中的顺序，像这样？

<div class="row">
    <div class="col-md-3"> ... </div>
    <div class="col-md-9"> ... </div>
</div>

我看不出他们给出的示例有任何可能的用例，因为订单是col-md-3, col-md-9还是col-md-9, col-md-3你仍然无法获得在任何设备上任何更多或更少的宽度 - 它们仍然加起来为12.因此，为什么不在正确的顺序中在HTML中定义它？

我理解这些课程在技术上如何运作。但我不明白它们的用例可能是什么，因为它们似乎没有按照您想要的顺序定义事情而做任何你不能做的事情？基本上你不能在给定设备上获得更多或更少的视口宽度，所以你想在哪里做这样的事情？

Answer 1

列排序类允许我们根据不同的浏览器大小更改网格系统的顺序。这意味着在大屏幕上，您可以拥有与移动屏幕不同的网格。

你可以查看这个例子， https://scotch.io/tutorials/reorder-css-columns-using-bootstrap

Answer 2

为什么你不只是写下你想要的顺序出现在您的HTML
中

这是因为当我们编写标记时，我们也应该考虑它的语义。

例如，您的页面左侧有一个侧边栏，右侧有一篇文章。在您的标记层次结构中，文章应位于侧边栏之前，因为该文章是主要页面内容。

但是如果你float他们left，文章将在左侧，侧边栏将在右侧，这与您想要实现的目标相反。因此，为了解决此问题，您将使用push和pull类，您就会明白这一点。

这只是一个例子。当然，其他选项可用于实现相同的结果，例如float他们right，或者将侧边栏标记放在文章之前，但用<aside>元素包装它。

Bootstrap列排序的真实用例（推，拉）

2 个答案: