执行多响应列时清除行 - Bootstrap [英] Clear Rows When Doing Multi-responsive Columns - Bootstrap

问题描述

该标题可能不太准确，但情况如下:

正如您在 HTML 中所见，网格系统从 xl 屏幕上的 4 个图像到 lg 屏幕上的 3 个图像，再到任何更少的 2 个.

我试图让它正确显示 - 每个屏幕尺寸的适当数量的图像，也就是说.然而，一些时髦的事情正在发生，使用引导类无法完全弄清楚.

在我看来，我必须在每个断点处动态添加行.

有什么建议吗?

-- 更新 --刚刚意识到 col-xl-* 不存在.然而，这根本没有改变这种情况.请忽略 xl 声明.

-- 更新 2 --更新了图片.

-- 更新 3 --我会努力澄清我的目标.对于我帖子中所附的特定图片，我希望每行显示 3 个框 - 并非全部都是急速的.

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

解决方案

我通过添加 clearfix 元素解决了这个问题.我想要 md 上的 3 列和 sm 上的 2 列，我就是这样做的:

<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 .我觉得这个解决方案并不理想，但效果很好.

自 Bootstrap v3.2.0 起 .visible-* 类已弃用.

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

类 .visible-xs、.visible-sm、.visible-md 和 .visible-lg 也存在，但自 v3.2.0 起已弃用.它们大致相当于 .visible-*-block，除了用于切换相关元素的其他特殊情况.

编辑 2: 只要您不想编辑 CSS，此解决方案就可以工作，如果您可以选择这样做，我建议您使用 乔纳斯的回答，因为在我看来它要简单得多.

That title might not be very accurate but here is the situation:

As you can see in the HTML, The grid system goes from 4 images on xl screens to 3 on lg screens to 2 on anything less.

I am trying to get it to display properly - the proper amount of images at each screen size, that is. However, something funky is going on and can't quite figure it out using bootstraps classes.

It seems to me that I would have to add rows dynamically at each break-point.

Any suggestions?

-- UPDATE -- Just realized that col-xl-* doesn't exist. However, that does not change the situation at all. Please disregard the xl declaration.

-- UPDATE 2 -- Updated images.

-- UPDATE 3 -- I'll try to clarify my goal. For that specific image attached in my post, I would like for 3 boxes to appear per row - not all helter skelter.

When it collapses down to 2 boxes per row (xs device), I want to make sure every row has 2 boxes.

解决方案

I solved this issue by adding clearfix elements where they should be. I wanted 3 columns on md and 2 columns on sm and this is how I did it:

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

So i used clearfix visible-sm after every second div and clearfix visible-md after every third div. I don't find this solution ideal, but it works rather well.

EDIT: As of Bootstrap v3.2.0 .visible-* classes are deprecated.

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

The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.2.0. They are approximately equivalent to .visible-*-block, except with additional special cases for toggling -related elements.

EDIT 2: This solution works as long as you do not want to edit CSS, if you have the option to do so, I recommend you use Jonas's answer as it is much simpler in my opinion.

这篇关于执行多响应列时清除行 - Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！