twitter-bootstrap – 当做多响应列时清除行 – 引导

发布时间：2020-12-17 23:59:35 所属栏目：安全来源：网络整理

导读：这个标题可能不是很准确，但在这里是情况：正如你可以看到在HTML中，网格系统从4个图像在xl屏幕上的3在lg屏幕上，2在任何东西。我试图让它正确显示 – 在每个屏幕尺寸，即适当的图像数量。但是，一些时髦的事情正在发生，不能使用bootstrap类。在我看来，

这个标题可能不是很准确，但在这里是情况：

正如你可以看到在HTML中，网格系统从4个图像在xl屏幕上的3在lg屏幕上，2在任何东西。

我试图让它正确显示 – 在每个屏幕尺寸，即适当的图像数量。但是，一些时髦的事情正在发生，不能使用bootstrap类。

在我看来，我想在每个断点处动态添加行。

有什么建议么？

– 更新 –
只是意识到col-xl- *不存在。然而，这并不改变情况。请忽略xl声明。

– 更新2 –
更新的图片。

– 更新3 –
我会尽力澄清我的目标。对于在我的帖子中附加的特定图像，我想要每行出现3个框 – 不是所有的helter skelter。

当它折叠到每行2盒(xs设备)，我想确保每一行有2个盒子。

解决方法

我解决了这个问题，通过添加clearfix元素应该在哪里。我想要3列md和2列sm，这是我怎么做：

<div class="row">
    <div class="col-sm-6 col-md-4"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="clearfix visible-sm"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="clearfix visible-md"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="clearfix visible-sm"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="clearfix visible-md"></div>
    <div class="clearfix visible-sm"></div>
    <div class="col-sm-6 col-md-4"></div>
</div>

所以我使用clearfix visible-sm每隔一个div和clearfix visible-md每个第三个div。我不觉得这个解决方案是理想的，但它的工作相当不错。

编辑：
自Bootstrap v3.2.0 .visible- *类已弃用。

http://getbootstrap.com/css/#responsive-utilities：

类.visible-xs，.visible-sm，.visible-md和.visible-lg也存在，但从v3.2.0开始已弃用。它们大致相当于.visible – * – 块，除了用于切换相关元素的额外特殊情况。

编辑2：这个解决方案的工作原理只要你不想编辑CSS，如果你有这样做的选择，我建议你使用Jonas的答案，因为它在我看来更简单。

（编辑：李大同）

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