自举对齐不同高度的列 [英] Bootstrap align Columns of different height

问题描述

我希望能够将未知数量的列与未知的高度对齐。由于我不知道会有多少列，所以我不理想使用多行来拆分列。通过使用列表项，我几乎可以实现所需的结果。

I would like to be able to align an unknown number of columns with an unknown height. Since I do not know how many columns there will be it is not ideal for me to use multiple rows to split up the columns. I can almost achieve the outcome I want by using list items.

我不喜欢使用列表项的一件事是，一旦页面达到调整大小点，我将在右侧留有多余的空间。顶部的一组使用列表项，底部的一组使用引导程序的col。底部设置的问题是，当分栏符断开时，它们未对准最左边的位置。

The one thing I don't like about using list items is that once the page hits the resize point I am left with the extra space on the right hand side. The top set is using list items and the bottom set is using bootstrap's col's. The problem with the bottom set is when the col's break they don't align to the furthest left position.

有没有办法使用引导程序来实现这一目标？

Is there a way to achieve this using bootstrap?

<div class="container-fluid">
    <div class="row">
               <ul>
                    <li class="list-item" style="height:200px;"></li>
                    <li class="list-item" style="height:120px;"></li>
                    <li class="list-item" style="height:100px;"></li>
               </ul>
    </div>
</div>


<div class="container-fluid">

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="box" style="height:200px"></div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="box" style="height:120px"></div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="box" style="height:100px"></div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="box"></div>
    </div>   
 </div>
</div>

jsFiddle

推荐答案

尝试一下：

.row {
  display: flex;
  flex-wrap: wrap;
}

这篇关于自举对齐不同高度的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！