将 Bootstrap Grid 用于 Tile 系统但没有 JS

Question

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

http://jsfiddle.net/6Lcx2k2t/

这是部分标记：

<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，则该点之后的任何内容都将换行到下一行）。我已经跨浏览器对此进行了测试，但是谁能告诉我为什么我的方法最终可能会不稳定？顺便说一句，我在瓷砖周围包裹了一个带有 col-xs-12 网格类的 div，这样我就可以获得我的瓷砖没有应用的填充，因为我没有像我应该使用的那样使用引导程序。我确实知道这种方法会偏斜居中等，但就我而言，这不是问题。

Answer 1

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

假设您想知道是否可以连续超过 12 个：我认为这可以。 Twitter Bootstrap 不再对连续使用 :first-child 或 :last-child 元素做任何事情，所以不要担心超过 12 个。

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