在twitter bootstrap中删除div之间的填充

Question

我是bootstrap 3的新手。我想将一行划分为8列和4列，同时添加行的背景

            <div class="row" >
                <div class="col-sm-8">
                    <div class="abc" style="background:blue">a</div>
                </div>
                <div class="col-sm-4">
                    <div class="abc" style="background:blue; border:1px solid red">b</div>
                </div>
            </div>

但我不知道为什么两列之间有空格。那么，我该如何删除空白。以下是更详细的图片。

ps：抱歉我的英文不好

Answer 1

查看直播 Bootply

CSS

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
    padding-right:0;
    padding-left:0;
}

.row.no-gutter {
    margin-left: 0;
    margin-right: 0;
}

HTML

<div class="row no-gutter">
    <div class="col-lg-8"><div>one</div></div>
    <div class="col-lg-4"><div>two</div></div>
</div>

对齐

Answer 2

使用此

HTML

<div class="row" >
                <div class="col-sm-8 paddin0 margin0">
                    <div class="abc" style="background:blue">a</div>
                </div>
                <div class="col-sm-4 paddin0 margin0">
                    <div class="abc" style="background:blue; border:1px solid red">b</div>
                </div>
            </div>

CSS

.paddin0 {
padding:0px !important
}
.margin0{
margin:0px; !important
}

Answer 3

我不是引导大师，如何将蓝色背景添加到父.row而不是两个子div？

<div class="row" style="background:blue">
    <div class="col-sm-8">
        <div class="abc">a</div>
    </div>
    <div class="col-sm-4">
        <div class="abc" border:1px solid red">b</div>
    </div>
</div>

Answer 4

只需将其添加到您的css文件

即可

.nopadding {
    padding-left: 0px;
    padding-right: 0px;
}

另外，将该类添加到列div

中

有一个新的HTML代码：

<div class="row" >
    <div class="col-sm-8 nopadding">
        <div class="abc" style="background:blue">a</div>
    </div>
    <div class="col-sm-4 nopadding">
        <div class="abc" style="background:blue; border:1px solid red">b</div>
    </div>
</div>

将删除填充。

为什么我添加了新的css类？

因为你可能需要boostrap的默认css结构，所以保留它们是一个好主意，nopadding类也可以用于你想删除其填充的其他div。

希望它有所帮助。

Answer 5

你可以在红色衬里的div上使用减去边距，例如margin-left：-30px，请看这里的demo：

http://www.bootply.com/DDhnkOqeID

干杯！