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

Question

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

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

如果您只想要一个通用的“所有列在 < 480px 设备上必须是全宽”，您可以执行以下操作来节省在标记中添加额外的类：

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