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

Question

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

目前，我将 .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

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

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

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

  <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>

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

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

Answer 3

只是为了在棺材上放最后一颗钉子，你真的需要 class row+的组合来col-12进行单列布局，以保持与布局中可能存在的其他多列行的一致性。这可以防止在设计人员可能会要求与内列装订线不同的自定义外部装订线的布局中出现错位。

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

Answer 4

我知道这有点晚了，但上面的答案没有考虑网格偏移类

您可以使用以下内容将列居中：

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