如何减少引导程序上列之间的间距? [英] How can I reduce the gutter between columns on bootstrap?

查看：25
本文介绍了如何减少引导程序上列之间的间距?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

<div class="row"><div class="col-xs-3"><div class="side-menu">1<br>2<br>3</div>
<div class="col-xs-9"><div class="菜单">菜单选项在这里

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

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

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

CSS

.food-item {宽度:100%；背景:红色；高度:200px；背景:黄色；}.菜单 {背景:红色；}.侧菜单{背景:绿色；}

解决方案

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="row"><div类="col-xs-3"><div class="side-menu">1<br>2<br>3</div>
<div class="col-xs-9 gutter-5"><div类="菜单">菜单选项在这里
<div class="row gutter-5"><div class="col-xs-4 gutter-5 "><div class="food-item "></div>
<div class="col-xs-4 gutter-5 "><div class="food-item "></div>
<div class="col-xs-4 gutter-5"><div class="food-item "></div>

demo: http://www.bootply.com/drT0TDRetE

How can I reduce the gutter between the yellow blocks? I want the red div to align properly on top of the yellow blocks like it currently is. I tried reducing the padding for the columns but then the red div does not align properly.

<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;
}

解决方案

DEMO http://www.bootply.com/chuUEA13P4

You have to reduce the padding and the row margin to match:

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

这篇关于如何减少引导程序上列之间的间距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆