twitter-bootstrap - col-*-12 (col-xs/col-sm/etc) 在 Bootstrap 3 中使用

Question

我在 StackOverflow 上的代码示例和待售主题中看到类似以下内容(从未在 Bootstrap 的示例中)。

<div class="container">
  <div class="row">
    <div class="col-xs-12">
       <p>Words go here</p>
     </div>
    </div>
  </div>

或者

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
       <p>Words go here</p>
     </div>
    </div>
  </div>

它让我发疯，因为根据 Bootstrap 自己的文档和常识，这两者对于全宽单列都不正确。



你什么时候真正使用网格系统？ col-*-12什么时候参加进来？

Answer 1

你的挫败感是对的.. <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">完全是多余的。

因为 Bootstrap 3+ 是移动优先的，所以您声明的任何 col 类都会向上传播，这意味着它们适用于声明的设备(xs、sm、md、lg)和更大的设备。所以，col-xs-12 col-sm-12是多余的。只需使用 col-xs-12为了同样的效果。

此外，如果您不声明 xs 类，则布局将默认为 col-*-12 一旦低于您声明的 smalles col-class。例如<div class="col-sm-6">是 sm 上的半角及以上，但在 xs 上为全角.鉴于 <div class="col-md-6">是 md 上的半宽及以上，但在 sm 上全宽和 xs .

话虽如此，您应该始终声明至少一个 col-class，以便它获得相关的填充和其他样式细节。