Twitter bootstrap col-*-12（col xs/col sm/etc）用于引导3

我在StackOverflow和themes for sale的代码示例中看到了类似的内容（Bootstrap的示例中从未出现过）

这里有话要说

或

这里有话要说

这让我抓狂，因为根据Bootstrap自己的文档和常识，这两种方法对于全宽单列都是不正确的。

---

您何时实际使用网格系统？

col-*-12

什么时候起作用？

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

了解：

上述两个示例的正确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 -->

这里有话要说

如果希望列为全宽，它将位于您使用的最后一个column类下。下面是col sm-min width开始处的全宽（在Bootstrap 3.x的默认下载中为767px及以下）

东西
东西

不要忘记外部的.container或.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 -->

东西
东西

---

无论如何，col-*-12在嵌套情况下非常有用，尤其是在表单中。

您的沮丧是对的<代码>是完全冗余的

因为Bootstrap3+是首先移动的，所以您声明的任何col类都会向上移动，这意味着它们适用于声明的设备（xs、sm、md、lg）和更大的设备。因此，

col-xs-12 col-sm-12

是冗余的。只需使用

col-xs-12

即可获得相同的效果

此外，如果您没有声明xs类，那么布局将在您声明的smalles col类下面默认为col-*-12。e、 g.

在

sm

及以上为半宽，但在

xs

上为全宽。而

在

md

及以上为半宽，但在

sm

及

xs

为全宽

---

也就是说，您应该始终声明至少一个col类，以便它获得相关的填充和其他样式细节

但它已经做到了。如果您没有声明，但您在.container或.container流体中，则填充将按其工作方式存在，即在L和R上添加与行的负边距相同的填充，因此如果行或列为全宽，则不需要该行或列类。即使是Bootstrap自己的示例也会说“不需要网格类…”您不需要col-xs-12，但在我想不到且从未使用过的非常精选的情况下。如果使用col-sm-4和col-sm-8，填充将出现在较小的视口上，因为它们是在媒体查询之外指定的，介质查询中只包括宽度和浮动。col-xs-12 col-sm-12不是必需的，甚至不是行。看看吧，只要有一个.container/.container流体，你就不需要它。我不同意：。除非您在任何地方都没有使用col类，否则非col类div的内容不会与其他内容对齐。

<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 -->

<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 -->

<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 -->