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列与其他列不同-因为没有剩余浮点数,请参阅:https://github.com/twbs/bootstrap/issues/10152

Answer 2

好吧,如果你只有一个元素并希望它使用容器的整个宽度(1170px),那么你可能根本不需要.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>

在这种情况下,除了添加负边距(行)和填充(col)之外,行/列不会执行任何操作.

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