如何更改调整大小时行中的列数 - 引导

当调整窗口大小时，需要一些帮助来更改行中的列数。例如，对于大中型屏幕，应该有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

如何更改调整大小时行中的列数 - 引导

回答

相关问题