col-*-12 (col/col/ 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

如果东西是全宽度的，你根本不需要它。

​

学习：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 min宽度开始的地方(所以767 3.x，在默认下载的Bootstrap 3.x中)。

<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流体(每组不改变宽度的内容一组)。.container或.将.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 -->

总之，-*-12在嵌套情况下很有用，特别是在表格中。

Answer 2

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

因为Bootstrap 3+是可移动的，所以你宣布的任何一种类型都是向上移动的，这意味着它们适用于声明的设备(xs、sm、md、lg)和更大的设备。因此，col-xs-12 col-sm-12是多余的。只需使用col-xs-12达到同样的效果。

另外，如果您没有声明xs类，布局将默认为col-*-12，在您声明的小类下面。<div class="col-sm-6">在sm上是半宽的，而在xs上是全宽的.而<div class="col-md-6">在md上是半宽度，而在sm和xs上是完全宽度。

尽管如此，您始终应该声明至少一个class，所以它得到了相关的填充和其他样式的细节。