Question

人们！

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

我在Bootstrap上有三列和两行：

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

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

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

有没有办法增加整行的高度，将其大小调整为最高的＆＃39; 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

如果你有两行：

<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个col就像这样：

<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不会堆叠在彼此之下。

列调整大小时的换行（Bootstrap）

1 个答案: