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