如何更改調整大小時行中的列數 - 引導

當調整窗口大小時，需要一些幫助來更改行中的列數。例如，對於大中型屏幕，應該有3列一列，對於小應該有2和用於額外的小隻有1列如何更改調整大小時行中的列數 - 引導

像這樣

對於大中型

{COL-1} {COL-2} {COL-3}

{COL-4} {COL-5} {COL-6}

對於小

{COL-1} {COL-2}

{COL-3} {COL-4}

{COL-5} {COL-6}

和超小型類似

我現在做的是做一行，並把3列在它

<div class="row"> 
    <div class="col-lg-4 col-sm-6 col-xs-12"> 
    Some content here for column 1 
    </div> 
    <div class="col-lg-4 col-sm-6 col-xs-12"> 
    Some content here for column 2 
    </div> 
    <div class="col-lg-4 col-sm-6 col-xs-12"> 
    Some content here for column 3 
    </div> 
</div> 
<div class="row"> 
    <div class="col-lg-4 col-sm-6 col-xs-12"> 
    Some content here for column 4 
    </div> 
    <div class="col-lg-4 col-sm-6 col-xs-12"> 
    Some content here for column 5 
    </div> 
    <div class="col-lg-4 col-sm-6 col-xs-12"> 
    Some content here for column 6 
    </div> 
</div>

但是使用這一招，在小屏幕上顯示它2列一列，並且下一行僅有1列

{COL-1} {COL-2}

{COL -3}

{COL-4} {COL-5}

{COL-6}

任何人都可以請幫我解決這個問題。

感謝

來源

2017-04-16 Syed Khan

感謝響應，加入我的代碼在編輯的版本 –

這是當使用引導的column wrapping一個很好的例子，響應網格視圖。

把所有的列在1 .row ...

http://www.codeply.com/go/zyTOcNXo0m

<div class="row"> 
    <div class="col-lg-4 col-sm-6 col-xs-12"> 
    Some content here for column 1 
    </div> 
    <div class="col-lg-4 col-sm-6 col-xs-12"> 
    Some content here for column 2 
    </div> 
    <div class="col-lg-4 col-sm-6 col-xs-12"> 
    Some content here for column 3 
    </div> 
    <div class="col-lg-4 col-sm-6 col-xs-12"> 
    Some content here for column 4 
    </div> 
    <div class="col-lg-4 col-sm-6 col-xs-12"> 
    Some content here for column 5 
    </div> 
    <div class="col-lg-4 col-sm-6 col-xs-12"> 
    Some content here for column 6 
    </div> 
</div>

http://www.codeply.com/go/zyTOcNXo0m

來源

2017-04-16 14:59:36 ZimSystem

感謝這部作品:)我沒有」我知道我們可以連續添加12列以上。謝謝 –

用於引導

<div class="container"> 
     <div class="row"> 
     <div class="col-lg-4 col-sm-6 col-xs-12"></div> 
     <div class="col-lg-4 col-sm-6 col-xs-12"></div> 
     <div class="col-lg-4 col-sm-12 col-xs-12"></div> 
     </div> 
</div>

來源

2017-04-16 14:53:59 Momin

如何更改調整大小時行中的列數 - 引導

回答

相關問題