当屏幕小于480px时，如何让bs3中的网格堆叠？

Question

根据该文档，额外的小型设备电话（＆lt; 768px）网格始终是水平的，即永远不会堆叠。我正在寻找一种方法，当屏幕小于480px时，使网格堆叠。

Answer 1

将“col-xxs”类添加到列中：

@media (max-width: 480px) { 
   .col-xxs {
      display:block;
      float:none;
      width: 100%
   }
}

Answer 2

您可以使用'col-sm- *'类。这是“小”网格断点，但小于768像素，它将堆叠..

<div class="container">
    <div class="row">
      <div class="col-sm-4">col-sm-4</div>
      <div class="col-sm-4">col-sm-4</div>
      <div class="col-sm-4">col-sm-4</div>
    </div>
</div>

演示：http://bootply.com/75567

Answer 3

如果你只想要一个通用的＆＃39;所有cols必须是全宽的＆lt; 480px设备＆＃39;你可以做这样的事情来节省在标记中添加其他类：

[class^="col-"], [class*=" col-"] {
    display:block;
    float:none;
    width: 100%;
}