bootstrap如何禁用单行中列之间的垂直间隙

Question

我有一行有20个不同高度的列（由于其中的文本数量不同），如下所示：

<div class="row container-fluid nopadding">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 ">
        <h1>title1</h1>
        <p>asdasdasdasdasd</p>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
         <h1>title2</h
         <p>asdasdasddddasdasdadasdasdasdasdasdasdasdasdasdasdasdasdddd</p>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <h1>title3</h1>
        <p>asdasdasdddaasdasdasd</p>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 ">
        <h1>title4</h1>
        <p>asdasdasdasdasdasdasdasdasd</p>
   </div>
   <!---etc etc...--->
</div>

他们现在出现的方式是：

我喜欢它们堆叠的方式是没有垂直间隙：

或者作为平衡长度列：

我怎么能实现这个目标？ bootstrap col对它有好处吗？

Answer 1

您可以尝试使用nopadding类为行内的每个列添加边距或填充，如下所示：

.nopadding .col-lg-3 {
    margin-top: 0;
    padding-top: 0;   
    margin-bottom: 0;
    padding-bottom: 0;   
}

只需对yopu使用的每种列类型执行此操作。这将删除嵌套在该行内的列的顶部和底部周围的边距和填充。