Bootstrap v3网格系统中单列的最佳实践是什么？

Question

我已经阅读了这里关于网格系统的内容：https://getbootstrap.com/docs/3.4/css/#grid。虽然文档没有直接讨论在一行中只有一个列的情况，但我在这里看到了一个例子：https://getbootstrap.com/docs/3.4/css/#grid-offsetting > 示例代码的第三行。

目前，我正在将类.col-xs-12应用于包含标签的<div class="row">中的一个列，并且在所有视口尺寸上都能正常工作。

然而，我想确保是否有更好的方法来做到这一点。

- user2788141

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

- Bass Jobsen

---

这只是因为你添加了一个.row元素。如果不使用.col-xs-12，那么也不需要使用.row。因此，使用.col-xs-12的一个理由是将.row并入其中，以便如果您以后想添加列，则不必再添加.row。它最小化了例外情况，并保持了事物的“并行性”。 - ahnbizcad

@gwho 我同意你的观点，我们这里不需要.row，但我认为在左右两侧加上.col-md-12会更好。 - Jitendra Vyas

@JitendraVyasI 但你不需要 .col-md-12 来设置填充。当你只使用 .container 时，它已经有了 15 像素的左右填充，如果你添加一个 .row 它会减去 -15 像素，而添加 .col-md-12 又会再次添加 15 像素。我认为使用整个 DOM 树没有意义，而且你拥有的 DOM 越多，页面对于 CSS 和 Javascript 越“沉重”。 - Lucas Martins

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>

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

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

- Alexander Rechsteiner

Answer 3

为了保持与其他多列行的一致性，单列布局确实需要使用类组合 row + col-12。这可以防止在设计师可能请求不同于内部列间距的自定义外部间距时导致布局错位。

这是一个概念验证的链接： https://codepen.io/martindubenet/full/OJVwEWv

- MartinDubeNet

Answer 4

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

你可以使用以下代码居中一列：

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

- Typo