如何减少bootstrap上列之间的装订线？

Question

演示：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;
}

Answer 1

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