Css 引导对齐不同高度的列

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

我不喜欢使用列表项的一件事是，一旦页面到达调整大小的点，我就在左边，在右边有额外的空间。顶部集合使用列表项，底部集合使用引导集合的col。底部集合的问题是，当列的断点未对齐到最左边的位置时

有没有一种方法可以通过引导实现这一点

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

---

你真的不需要引导来处理这个问题。这里有一个使用内联块的潜在解决方案。我想它与bootstrap兼容

.盒子{ 利润率：15px； 宽度：80px； 背景颜色：灰色； 显示：内联块； 垂直对齐：顶部； }

---

另一种处理方法是使用CSS强制执行clear:left every x columns，以保持Bootstrap的响应列。例如，当一行中有4列时：

.row > .col-md-3:nth-child(4n+1) {
    clear: left;
}

---

对!！有办法。这是一个css唯一的解决方案。试试这个：

.col-xs-6:n类型2n+3， .col-xs-4:nth-of-type3n+4， .col-xs-3:nth类型4N+5， .col-xs-2:nth类型6N+7， .col-xs-1:n类型12n+13 { 明确：两者皆有； } @媒体最小宽度：768{ [类别*=列xs][类别*=列sm]， [class*=col xs][class*=col md]， [类别*=列xs][类别*=列lg] { 明确：无； } .col-sm-6:2n+3类型的第n个， .col-sm-4:3N+4类型的第n个， .col-sm-3:nth类型4N+5， .col-sm-2:nth类型6N+7， .col-sm-1:N类型12N+13 { 明确：两者皆有； } } @媒体最小宽度：992{ [class*=col sm][class*=col md]， [class*=col sm][class*=col lg] { 明确：无； } .col-md-6:2n+3类型的第n个， .col-md-4:nth-of-type3n+4， .col-md-3:nth-of-type4n+5， .col-md-2:nth-of-type6n+7， .col-md-1:nth-of-type12n+13 { 明确：两者皆有； } } @媒体最小宽度：1200{ [class*=col md][class*=col lg] { 明确：无； } .col-lg-6:2n+3类型的第n个， .col-lg-4:nth-of-type3n+4， .col-lg-3:nth-of-type4n+5， .col-lg-2:nth-of-type6n+7， .col-lg-1:N-of-type12n+13{ 明确：两者皆有； } } //使用.col nobreak类停用此修复程序 诺布雷克上校{ 清楚：没有！重要； } 试试这个：

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

---

但是使用这种解决方案，当页面变小时，您的左右两侧甚至都没有填充，一旦右框断开到下一行，您的右边就会留下空白。我不确定我是否理解您的情况，但是如果您需要填充，您可以将其添加到父元素。我已经为此问题创建了一支钢笔。