css3列在屏幕大小更改时在bootstrap中崩溃

Question

我正在开发一个wordpress主题usign bootstrap，它使用css3列显示帖子。

有没有办法说在桌面上引导它必须渲染3列，在中型屏幕上（例如平板电脑），它必须呈现2列，1表示小屏幕？

谢谢你！

Answer 1

有一种方法可以告诉bootstrap特定视口大小的列有多大，同样，有一种方法可以告诉它根据视口大小隐藏/显示列。例如：

<div class="col-lg-4 col-md-6 col-xs-12">
  Column1 Content
</div>

<div class="col-lg-4 col-md-6 hidden-xs">
  Column2 Content
</div>

<div class="col-lg-4 hidden-md hidden-xs">
  Column3 Content
</div>

以上代码的工作原理如下：

桌面设备将显示：

<!-- 33.3333% width for each column -->

Column1 Content | Column2 Content | Column3 Content 

在平板电脑和中型屏幕上

<!-- 50% width for each column -->

Column1 Content | Column2 Content

最后是在较小的屏幕和移动设备上

<!-- 100% width column -->

Column1 Content

您可以使用[hidden|visible]-[lg|md|sm|xs]调整布局，以隐藏/显示列，具体取决于视口大小。想象一下，使用这些网格类可以实现多少响应能力;）

---

参考：

http://getbootstrap.com/css/#grid-options
http://getbootstrap.com/css/#responsive-utilities