Bootstrap將兩列布局轉換爲四列布局

如果我在桌面上有兩列，可以將這兩列轉換爲平板視圖中的四列。Bootstrap將兩列布局轉換爲四列布局

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

如果bootstrap無法實現，是否可以使用表？

來源

2015-04-24 user3288891

將您的div類更改爲"col-xs-3"並分配寬度和高度。

的jsfiddle here

全碼：

HTML

<div class="row"> 
<div class="col-xs-3">div</div> 
<div class="col-xs-3">div</div> 
<div class="col-xs-3">div</div> 
<div class="col-xs-3">div</div> 
</div>

CSS

div {border: 2px black solid; width:100%;}

看看一種叫做'Scaffolding'

自舉3還提供了功能，爲電網系統和媒體查詢了一個全新的系列，看看這個blog post

來源

2015-04-24 04:13:11 BIW

其實我想在桌面視圖兩列，但在平板電腦視圖4列。 – user3288891

查看更新的答案。資源材料應該得到你想要的結果。 – BIW

所以使用我給你的資源實現了媒體查詢，並通過從col-sm-6到col-xs-3的分配ID更改了div對象的html類，併爲該查詢中的列添加了兩個div標籤。 – BIW

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

來源

2015-04-24 04:14:55

Bootstrap將兩列布局轉換爲四列布局

回答

相關問題