jquery - 调整列大小时换行(Bootstrap)

Question

伙计们!

我遇到了问题。我希望你能帮助我。

我在 Bootstrap 上有三列和两行:

 _ _ _
|_|_|_| -> 1,2,3
|_|_|_| -> 4,5,6

当第二个单元格增加它的大小时，会发生这种情况:

 _ _ _ 
|_| |_| -> 1,2,3
 _|_|_| -> -,2,4
|_|_|   -> 5,6,-

有什么方法可以增加整行的高度以将其大小调整为最高的“div”，例如:

 _ _ _
| | | | -> 1,2,3
|_|_|_| -> 1,2,3
|_|_|_| -> 4,5,6

提前谢谢你。

编辑 1:

制作精良，我试过了，但结果是一切都在同一行。 :(

为了不更改全局行设置，我将您的解决方案应用于一个名为 row-products 的新类。这是我的代码:

HTML

<div class="row row-products">
    <div class="col-md-4 col-xs-6">
        <div class="product rounded">
            <img src="../img/portfolio/item1.jpg" class="img-responsive rounded" alt="">
            <div class="portfolio-caption">
                <h4>Item 1</h4>
                <h3>US$ 120</h3>
                <p class="text-muted">small description</p>
            </div>
            <div id="item1">
                <a class="btn btn-primary" data-toggle="collapse" data-parent="#item1" href="#item1_clp">Details</a>
                <div id="item1_clp" class="panel-collapse collapse out">
                    <div class="panel-body">big description </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-xs-6">
        <div class="product rounded">
            <img src="../img/portfolio/item2.jpg" class="img-responsive rounded" alt="">
            <div class="portfolio-caption">
                <h4>Item 2</h4>
                <h3>US$ 120</h3>
                <p class="text-muted">small description</p>
            </div>
            <div id="item2">
                <a class="btn btn-primary" data-toggle="collapse" data-parent="#item2" href="#item2_clp">Details</a>
                <div id="item2_clp" class="panel-collapse collapse out">
                    <div class="panel-body">big description </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-xs-6">
        <div class="product rounded">
            <img src="../img/portfolio/item1.jpg" class="img-responsive rounded" alt="">
            <div class="portfolio-caption">
                <h4>Item 3</h4>
                <h3>US$ 120</h3>
                <p class="text-muted">small description</p>
            </div>
            <div id="item3">
                <a class="btn btn-primary" data-toggle="collapse" data-parent="#item3" href="#item3_clp">Details</a>
                <div id="item3_clp" class="panel-collapse collapse out">
                    <div class="panel-body">big description </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-xs-6">
        <div class="product rounded">
            <img src="../img/portfolio/item2.jpg" class="img-responsive rounded" alt="">
            <div class="portfolio-caption">
                <h4>Item 4</h4>
                <h3>US$ 120</h3>
                <p class="text-muted">small description</p>
            </div>
            <div id="item2">
                <a class="btn btn-primary" data-toggle="collapse" data-parent="#item4" href="#item4_clp">Details</a>
                <div id="item4_clp" class="panel-collapse collapse out">
                    <div class="panel-body">big description </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-xs-6">
        <div class="product rounded">
            <img src="../img/portfolio/item1.jpg" class="img-responsive rounded" alt="">
            <div class="portfolio-caption">
                <h4>Item 5</h4>
                <h3>US$ 120</h3>
                <p class="text-muted">small description</p>
            </div>
            <div id="item5">
                <a class="btn btn-primary" data-toggle="collapse" data-parent="#item5" href="#item5_clp">Details</a>
                <div id="item5_clp" class="panel-collapse collapse out">
                    <div class="panel-body">big description </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-xs-6">
        <div class="product rounded">
            <img src="../img/portfolio/item2.jpg" class="img-responsive rounded" alt="">
            <div class="portfolio-caption">
                <h4>Item 6</h4>
                <h3>US$ 120</h3>
                <p class="text-muted">small description</p>
            </div>
            <div id="item6">
                <a class="btn btn-primary" data-toggle="collapse" data-parent="#item6" href="#item6_clp">Details</a>
                <div id="item6_clp" class="panel-collapse collapse out">
                    <div class="panel-body">big description </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.row-products {
  padding: 25px;
  /*padding-top: 30px;*/
  display: flex;
}

.row-products > div {
  flex: 1;
}

Answer 1

如果你有这样的 2 行:

<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>
<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>

这应该不是问题。

但是如果你有一个单行，里面有 6 个列，就像这样:

<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>

我建议使用 flexbox。

CSS 看起来像这样:

.row {
   display: flex;
}

.row > div {
   flex: 1;
}

当然，根据 col-* 类，您应该只对某些媒体查询执行此操作，否则当条件满足时，col 不会相互堆叠。