html - 如何减少 Bootstrap 列之间的间距？

Question

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

如何减少黄色 block 之间的间距？我希望红色 div 像当前一样在黄色 block 的顶部正确对齐。我尝试减少列的填充，但红色 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;
}

Answer 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>