如何在调整大小时更改一行中的列数 - Bootstrap答案

【问题标题】：How to change number of column in a row on resize - Bootstrap如何在调整大小时更改一行中的列数 - Bootstrap
【发布时间】：2017-09-22 22:45:20
【问题描述】：

在调整窗口大小时，我需要一些帮助来动态更改行中的列数。例如，大、中屏应为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}

谁能帮我解决这个问题。

谢谢

【问题讨论】：

感谢您的回复，在编辑后的版本中添加了我的代码

标签： twitter-bootstrap

【解决方案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

【讨论】：

感谢这项工作:) 我不知道我们可以连续添加超过 12 列。谢谢

【解决方案2】：

用于引导的响应式网格视图

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

【讨论】：