0

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

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

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

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

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

4

1 回答 1

0

您可以使用 @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%;
  }
}

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

于 2013-08-13T17:22:42.870 回答