twitter-bootstrap - Bootsrap3 行列装订线塌陷

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

或者，自定义您的引导程序：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>