Question

我正在使用Bootstrap来创建遵循以下规则的网格：

中型和大型设备（992px以上） - 每行3个div 小型设备（介于768px和991px之间） - 每行2个div 超小型设备（低于767px） - 每行1个div

为此，我使用以下标记：

<div class="row">
    <div class="resource-group col-sm-6 col-lg-4">
        <img src="http://placehold.it/100x100">
        <h5>Title here</h5>
        <p>Zur spitzen in handercloppen sauerkraut unter, nutske heinee corkin biergarten auf floppern relaxern hast underbite. Pukein frau keepin noodle achtung poopsie. Here are some extra words to make this div taller.</p>
    </div>
    <div class="resource-group col-sm-6 col-lg-4">
        <img src="http://placehold.it/100x100">
        <h5>Title here</h5>
        <p>Zur spitzen in handercloppen sauerkraut unter, nutske heinee corkin biergarten auf floppern relaxern hast underbite. Pukein frau keepin noodle achtung poopsie.</p>
    </div>
    <div class="resource-group col-sm-6 col-lg-4">
        <img src="http://placehold.it/100x100">
        <h5>Title here</h5>
        <p>Zur spitzen in handercloppen sauerkraut unter, nutske heinee corkin biergarten auf floppern relaxern hast underbite. Pukein frau keepin noodle achtung poopsie.</p>
    </div>
    <div class="resource-group col-sm-6 col-lg-4">
        <img src="http://placehold.it/100x100">
        <h5>Title here</h5>
        <p>Zur spitzen in handercloppen sauerkraut unter, nutske heinee corkin biergarten auf floppern relaxern hast underbite. Pukein frau keepin noodle achtung poopsie.</p>
    </div>
    <div class="resource-group col-sm-6 col-lg-4">
        <img src="http://placehold.it/100x100">
        <h5>Title here</h5>
        <p>Zur spitzen in handercloppen sauerkraut unter, nutske heinee corkin biergarten auf floppern relaxern hast underbite. Pukein frau keepin noodle achtung poopsie.</p>
    </div>
    <div class="resource-group col-sm-6 col-lg-4">
        <img src="http://placehold.it/100x100">
        <h5>Title here</h5>
        <p>Zur spitzen in handercloppen sauerkraut unter, nutske heinee corkin biergarten auf floppern relaxern hast underbite. Pukein frau keepin noodle achtung poopsie.</p>
    </div>
</div>

以下CSS：

.resource-group {
    text-align: center;
    padding-bottom: 30px;
}

.resource-group img {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    display: block;
}

以下是我创建的jsFiddle：https://jsfiddle.net/wmyL1ct4/1/

这非常有效，直到其中一个div的内容比其他div更多，例如：

我的第一个想法是将自己的div.row中的前三个div和其自己的div.row中的后三个div包装为总共2行，但是当我切换到中等大小的屏幕时，我需要它只是每个div.row中的两个div，总共3行。

使用Bootstrap，如何根据断点将div放在不同的行中？

Answer 1

您可以按the docs应用重置标记。它确实可以制作更混乱的HTML，但它确实有用。

div class="resource-group col-sm-6 col-lg-4">
    ...
</div>

<div class="resource-group col-sm-6 col-lg-4">
    ...
</div>

<div class="clearfix visible-sm-block"></div>

<div class="resource-group col-sm-6 col-lg-4">
    ...
</div>

<div class="clearfix visible-md-block"></div>

Answer 2

我就是这样做的，只使用CSS：

/* Extra Small Devices (Below 767px) - 1 div per row */
@media (max-width: 767px) {
    .row > div {
        float: none;
    }
}
/* Small Devices (Between 768px and 991px) - 2 divs per row */
@media (min-width: 768px) and (max-width: 991px) {
    .row > div:nth-of-type(2n+1) {
        clear: left;
    }
}
/* Medium and Large Devices (Above 992px) - 3 divs per row */
@media (min-width: 992px) {
    .row > div:nth-of-type(3n+1) {
        clear: left;
    }
}

当然，我不会为.row > div创建这些媒体查询规则，因为这会影响整个网站。我将此用例的自定义类添加到<div class="row">并更改媒体查询，如下所示：

@media (min-width: 992px) {
    .row.myCustomClass > div:nth-of-type(3n+1) {
        clear: left;
    }
}

http://jsfiddle.net/wmyL1ct4/7/

Answer 3

如果我正确理解你，当你调整到较小的屏幕尺寸时，由于div中的一个项目比其他项目大，你的div会不均匀地打破？

而是在第一行尝试< class="row row-eq-height">。这会将行中每个项目的大小设置为该行中的最大元素。

使用Bootstrap，如何根据断点将div放在不同的行中？

3 个答案: