我需要一些帮助来在调整窗口大小时动态地更改一行中的列数.例如,对于大屏幕和中等屏幕,连续应该有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}
任何人都可以帮我解决这个问题.
谢谢
解决方法
这是何时使用Bootstrap的
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>