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>

OR

<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-class都会向上移动，这意味着它们适用于声明的设备（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和{{1}}的宽度为{{1}}。

这就是说，你应该总是声明至少一个col-class，所以它得到相关的填充和其他样式细节。

Answer 2

如果某些东西是全宽的，那么根本不需要它。

了解：http://getbootstrap.com/examples/grid/

以上两个示例的正确html是：

<div class="container">

       <p>Words go here</p>

      </div> <!--/.container for entire grouping of elements you do not want to exceed the width(s) set in the CSS for this class -->

如果您希望列的宽度为全宽，则它将位于您使用的最后一列列之下。下面的全宽度将在col-sm-min-width开始的地方（因此默认下载Bootstrap 3.x时为767px和UNDER）。

<div class="row">
    <div class="col-sm-4">
     Stuff
    </div><!-- /.col-sm-4 -->
    <div class="col-sm-8">
     Stuff
    </div><!-- /.col-sm-8 -->
</div><!-- /.row -->

不要忘记外部.container或.container-fluid（每组内容不改变宽度）。 .container或.container-fluid将.row上的负边距归零，这样就不会得到水平滚动条。

使用col - * - 12时的情况是在较小列类的最小宽度之后需要全宽的位置：

<div class="row">
    <div class="col-sm-6 col-md-12">
     Stuff
    </div><!-- /.col-sm-6 col-md-12 -->
  <div class="clearfix visible-md"></div>
    <div class="col-sm-6 col-md-4">
     Stuff
   </div><!-- /.col-sm-6 col-md-12 -->
</div><!-- /.row -->

无论如何，col - * - 12在嵌套情况下派上用场，尤其是表格。