如何减少引导程序列之间的间距？答案

【问题标题】：How can I reduce the gutter between columns on bootstrap?如何减少引导程序列之间的间距？
【发布时间】：2014-11-19 06:52:41
【问题描述】：

演示：http://www.bootply.com/drT0TDRetE

如何减少黄色块之间的间距？我希望红色 div 像现在一样在黄色块的顶部正确对齐。我尝试减少列的填充，但红色 div 没有正确对齐。

<div class="container">
    <div class="row">
        <div class=" col-xs-3 ">
            <div class="side-menu">1
                <br>2
                <br>3</div>
        </div>

        <div class="col-xs-9">
            <div class=" menu ">
                menu options here
            </div>

            <div class="row ">
                <div class="col-xs-4 ">
                    <div class="food-item "></div>
                </div>
                <div class="col-xs-4 ">
                    <div class="food-item "></div>
                </div>
                <div class="col-xs-4 ">
                    <div class="food-item "></div>
                </div>
            </div>
        </div>

    </div>
</div>

CSS

.food-item {
    width: 100 % ;
    background: red;
    height: 200px;
    background: yellow;
}

.menu {
    background: red;
}

.side-menu {
    background: green;
}

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

演示http://www.bootply.com/chuUEA13P4

您必须减少填充和行边距以匹配：

[class*="col-"].gutter-5 {padding-left:5px;padding-right:5px;}
.row.gutter-5 {margin-left:-5px;margin-right:-5px}

HTML

<div class="container">
    <div class="row">
        <div class=" col-xs-3 ">
            <div class="side-menu">1
                <br>2
                <br>3</div>
        </div>

        <div class="col-xs-9 gutter-5">
            <div class=" menu ">
                menu options here
            </div>

            <div class="row gutter-5">
                <div class="col-xs-4 gutter-5 ">
                    <div class="food-item "></div>
                </div>
                <div class="col-xs-4 gutter-5 ">
                    <div class="food-item "></div>
                </div>
                <div class="col-xs-4 gutter-5">
                    <div class="food-item "></div>
                </div>
            </div>
        </div>

    </div>
</div>

【讨论】：