Question

第一次使用Twitter BS3，我试图在大于320px宽的所有视口上实现3个相等的列（iPhone，比方说）。在320以下的视口中，我希望我的列垂直堆叠。

查看文档中的网格系统，我可以看到我可以使用以下类来设置网格系统的流程

最大容器宽度无（自动）728px 940px 1170px 类前缀.col- .col-sm- .col-lg -

上面的问题似乎是你只能在728像素以上的任何东西上控制列的布局。但是，如果我想要在320以上的任何东西上并排3个相等的列而不是预定义的728像素呢？

我正在寻找的一个很好的例子可以在Jetstrap主页上找到。三个蓝色圆圈保持并排布局，直到您在320像素宽的视口上。我的版本开始垂直堆叠在728像素左右。

Answer 1

您可以使用@media查询来覆盖Bootstrap通常如何处理“微小”网格.col-4 ..

3列HTML ..

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

小于320像素的CSS媒体查询将.col-4更改为100％宽度..

@media (max-width: 320px) {
  .col-4 {
    width:100%;
  }
}