Bootstrap对齐不同高度的列

Question

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

我不喜欢使用列表项的一件事是，一旦页面达到调整大小点，我就会留下右侧的额外空间。顶部集使用列表项，底部集使用bootstrap的col。底部设置的问题是当col的断裂时它们不会对齐到最左边的位置。

有没有办法使用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

Answer 1

试试这个：

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

Answer 2

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

<div>
  <div class="box" style="height: 120px;"></div>
  <div class="box" style="height: 20px;"></div>
  <div class="box" style="height: 40px;"></div>
  <div class="box" style="height: 60px;"></div>
  <div class="box" style="height: 80px;"></div>
</div>
<div>
  <div class="box" style="height: 20px;"></div>
  <div class="box" style="height: 60px;"></div>
  <div class="box" style="height: 80px;"></div>
</div>

NsdManager.stopServiceDiscovery

Answer 3

是的！有一种方法。这是一个仅限CSS的解决方案。试试这个：

.col-xs-6:nth-of-type(2n+3), 
.col-xs-4:nth-of-type(3n+4), 
.col-xs-3:nth-of-type(4n+5),
.col-xs-2:nth-of-type(6n+7), 
.col-xs-1:nth-of-type(12n+13) 
{
    clear: both;
}

@media (min-width: 768) {
    [class*="col-xs"][class*="col-sm"], 
    [class*="col-xs"][class*="col-md"], 
    [class*="col-xs"][class*="col-lg"] 
    {
        clear: none;
    }

    .col-sm-6:nth-of-type(2n+3), 
    .col-sm-4:nth-of-type(3n+4), 
    .col-sm-3:nth-of-type(4n+5), 
    .col-sm-2:nth-of-type(6n+7), 
    .col-sm-1:nth-of-type(12n+13) 
    {
        clear: both;
    }
}

@media (min-width: 992) {
    [class*="col-sm"][class*="col-md"], 
    [class*="col-sm"][class*="col-lg"] 
    {
        clear: none;
    }

    .col-md-6:nth-of-type(2n+3), 
    .col-md-4:nth-of-type(3n+4), 
    .col-md-3:nth-of-type(4n+5), 
    .col-md-2:nth-of-type(6n+7), 
    .col-md-1:nth-of-type(12n+13) 
    {
        clear: both;
    }
}

@media (min-width: 1200) {
    [class*="col-md"][class*="col-lg"] 
    {
        clear: none;
    }

    .col-lg-6:nth-of-type(2n+3), 
    .col-lg-4:nth-of-type(3n+4), 
    .col-lg-3:nth-of-type(4n+5), 
    .col-lg-2:nth-of-type(6n+7), 
    .col-lg-1:nth-of-type(12n+13) {
        clear: both;
    }
}

// use .col-nobreak class to deactivate this fix
.col-nobreak {
    clear: none !important;
}

首先，我们从最小分辨率（＆lt; 768）（col-xs- *）的列类型开始。如果行中断了几个列宽，我们将css属性设置为clear: both。

在下一步中，我们为第一个断点重置css属性clear，其中clear: both为所有列，其列宽为更高分辨率（所有列宽度为col-sm-x,col-md-x,col-lg-x）并为col-sm-*类型设置一个列行的中断。

等等......

使用.col-nobreak课程，您可以停用css hack。

您必须满足这些要求：

• 父行容器的cols必须具有相同的大小
• 父行的cols必须具有相同的html标记类型（div，secion）