甚至引导列之间的空格

Question

使用此标记...

<div class="container-fluid">

    <div class="row">

        <div class="col-md-3">
            <div style="background-color:gray">1</div>
        </div>

        <div class="col-md-6">
            <div style="background-color:gray">2</div>
        </div>

        <div class="col-md-3">
            <div style="background-color:gray">3</div>
        </div>

    </div>
</div>

这是一个jsfiddle（全屏运行）： http://jsfiddle.net/MojoDK/swKyX/

这是一个截图：

红色箭头处的div之间的间距是橙色箭头处div的空间的两倍。

如何使红色箭头处的div空间与橙色箭头处于相同的空间（10px），并且当浏览器窗口变小时三个div包裹时仍保持对齐的div /块？

Answer 1

.row > div:not(:first-child):not(:last-child) {
    padding: 0;
}

@media screen and (max-width: 768px) {
    .row > div:not(:first-child):not(:last-child) {
        padding: 0 15px;
    }
}

这将在三列布局中正常工作。

Answer 2

有几种方法，但这里有一个：

@media (min-width: 992px){
 .container-fluid{
   margin-left:15px;
   margin-right:15px;    
 }
}

这是一个小提琴（注意你可以导入bootstrap CSS以供将来参考）：

http://jsfiddle.net/swKyX/5/