Question

Bootstrap中有一个规则集要求我们永远不会超过12列布局。我阅读了有关为什么会这样做的文档，但是在我使用这个小模块的网格的方式中，我不确定规则集是否适用。这是我的小提琴演示：

以下是标记的一部分：

<div class="col-xs-12 component">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
        <span class="glyphicon-class">glyphicon glyphicon-asterisk</span>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
        <span class="glyphicon-class">glyphicon glyphicon-plus</span>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
        <span class="glyphicon-class">glyphicon glyphicon-cloud</span>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
       <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
       <span class="glyphicon-class">glyphicon glyphicon-envelope</span>
     </div>

    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
      <span class="glyphicon-class">glyphicon glyphicon-pencil</span>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <span class="glyphicon glyphicon-glass" aria-hidden="true"></span>
        <span class="glyphicon-class">glyphicon glyphicon-glass</span>
    </div>
</div>

这是一个演示工具栏，如果您在调整输出大小时注意到，则切片会调整视口的更改。但是，如果您注意到我的标记，我实际上错误地使用了引导网格类（我已经利用了这样一个事实，即如果你超过12，那么在该点之后的任何东西将包裹到下一行）。我已经通过浏览器对此进行了测试，但是有人能告诉我为什么我的方法最终会变得不稳定吗？顺便说一句，我在tile上包含了一个带有col-xs-12网格类的div，这样我就可以得到我的tile没有应用的填充，因为我没有像我应该那样使用bootstrap。我知道这种方法会偏向于中心等等，但就我而言，不是问题。

Answer 1

我不确定你在问什么...

假设你想知道一行中是否可以超过12：我认为没关系。 Twitter Bootstrap对行中的:first-child或:last-child元素不再执行任何操作，因此不要担心超过12。

我建议只使用col-*-1，col-*-2，col-*-3，col-*-4，col-*-6或col-*-12类，因为12可以整除通过这些数字。

使用Bootstrap Grid进行平铺系统但没有JS

1 个答案: