屏幕大小更改时css3列在引导中折叠

Question

我正在开发一个wordpress主题设计引导程序，它使用css3列显示post。

是否有一种方法可以说，在桌面上，它必须呈现3列，在中型屏幕上(例如平板电脑)，它必须呈现2列，1列用于小屏幕？

谢谢!

Answer 1

有一种方法可以告诉引导程序某一特定视口大小上的列有多大，还有一种方法可以告诉它根据视口大小隐藏/显示列。例如：

<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