twitter-bootstrap – 如何在resize上更改行中的列数 – Bootstr

发布时间：2020-12-18 00:20:17 所属栏目：安全来源：网络整理

导读：我需要一些帮助来在调整窗口大小时动态地更改一行中的列数.例如,对于大屏幕和中等屏幕,连续应该有3列,对于小的应该有2列,对于额外的小列只有1列像这样的东西适用于大中型 {COL-1} {COL-2} {COL-3} {COL-4} {COL-5} {COL-6} 对于小 {COL-1} {COL-2} {COL-3}

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!