Question

我需要一些帮助来在调整窗口大小时动态地更改一行中的列数。例如，对于大屏幕和中等屏幕，连续应该有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}

任何人都可以帮我解决这个问题。

由于

Answer 1

这是何时使用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>

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

Answer 2

bootstrap的响应式网格视图

 <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>

如何在resize上更改行中的列数 - Bootstrap

2 个答案: