Question

有没有办法折叠Twitter Bootstrap3中的列？

为了移除天沟填充柱，我们可以在Zurb Foundation中使用以下内容：

<div class="row collapse">
    <div class="large-6 columns"></div>
    <div class="large-6 columns"></div>
</div>

如何在Twitter Bootstrap中实现这一目标？

<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
</div>

Answer 1

您需要覆盖CSS ..

.row [class*="-6"] {
    padding-left:0;
    padding-right:0;
}

或者，创建一个特殊的类。

<div class="row no-gutter">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
</div>

.no-gutter [class*="-6"] {
    padding-left:0;
    padding-right:0;
}

演示：http://bootply.com/73960

或者，自定义您的Bootstrap：http://getbootstrap.com/customize/

Answer 2

正确的方法：

.no-gutter {
    margin-left: 0;
    margin-right: 0;    
}

.no-gutter > [class^="col-"] {
    padding-left: 0;
    padding-right: 0;
}

HTML：

<div class="row no-gutter">
    <div class="col-md-4 col-lg-3">
        ...
    </div>
</div>

Bootstrap 3排柱天沟坍塌

2 个答案: