bootstrap v3网格系统中行内单列的最佳实践？

Question

我在这里读到了网格系统：http://getbootstrap.com/css/#grid。虽然文档没有直接解决一行中有一列的情况，但我确实在这里看到了一个例子：http://getbootstrap.com/css/#grid-offsetting＆gt;示例代码的第三行。

目前，我正在将.col-xs-12类应用于包含标签中的一列，并且它在所有视口尺寸上运行良好。但是，我想确保没有更好的方法来做到这一点。

谢谢！

Answer 1

我认为添加col * -12将是最好的做法。它将使网格中的所有行都相同。

示例：

<强> HTML

<div class="container">
            <div class="row" style="background-color:yellow;">
                <div class="col-xs-12" style="background-color:aqua;">col-xs-12 inside a row</div>
            </div>
</div>                      
<div class="container">
            <div class="row" style="background-color:yellow;">
                direct inside a row
            </div>
</div>      
<div class="container">
            <div class="row" style="background-color:yellow;">
                <div class="col-xs-6" style="background-color:red;">col-xs-6 inside a row</div>
                <div class="col-xs-6" style="background-color:orange;">col-xs-6 inside a row</div>
            </div>
</div>

正如您所看到的，当您不添加col - * - 12时（由于缺少填充），内容与其他行不一致。所有相同的行将使未来的更改变得更容易。

您必须注意col * -12列与其他col- - 不同，因为没有剩余浮动，请参阅：https://github.com/twbs/bootstrap/issues/10152

Answer 2

好吧，如果你只有一个元素并希望它使用容器的整个宽度（1170px），那么你可能根本不需要.row / .col-xs-12。

请参阅此Example，查看页面本身的源代码。

注意顶部的内容如何不使用行/列？

  <div class="container">

  ...

  <h3>Three equal columns</h3>
  <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>

在这种情况下，除了添加负边距（行）和填充（col）之外，行/列不会执行任何操作。

此外，您指出的示例使用偏移，并且不是全宽，因此行/列是必需的。

Answer 3

我知道这有点晚了，但上面的答案并不考虑grid offsetting classes

您可以使用以下内容对列进行居中：

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

Answer 4

只需在棺材上钉上一根钉子，您真的需要为单列布局使用类row + col-12的组合，以保持与您可能拥有的其他多列行的一致性布局。这样可以防止在布局中出现错位对齐的情况，在该布局中设计人员可能会请求不同于内部列装订线的自定义外部装订线。

以下是我的概念证明的链接：https://codepen.io/martindubenet/full/OJVwEWv