当您使用Bootstrap创建并排div时,两侧都有一个排水沟,因此在两者之间有两倍的空间。你怎么避免这个?
<div class="col-lg-9">content here</div>
<div class="col-lg-3">content here</div>
这将在左侧和右侧为您提供15px的排水沟,但在两个div之间有30px的空间。你如何使它成为15像素的空间?
Bootstrap希望您将列放在行内(容器内)。
<div class="row">
<div class="col-lg-9">content here</div>
<div class="col-lg-3">content here</div>
</div>
该行在边缘上具有负边距,以完全消除最外侧列的侧面上的装订线。
它以这种方式设计,以确保所有内容都排成一行,即使您嵌套列集:
<div class="row">
<div class="col-lg-9">
<div class="row">
<div class="col-lg-6">Content</div>
<div class="col-lg-6">Content</div>
</div>
</div>
<div class="col-lg-3">content here</div>
</div>
如果要更改列之间的间距,Bootstrap希望您通过修改$spacing
SASS variable来实现。
您可以将列的填充减少为7.5px
,但您还必须将行的边距增加到-7.5px
,否则您将看到滚动。
注意:尝试在
.col-*
之前使用您的父类,否则它会影响您使用列类的所有其他地方
.parent .col-xs-9,
.parent .col-xs-3 {
padding: 0 7.5px;
}
.parent .row {
margin: 0 -7.5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="parent">
<div class="row">
<div class="col-xs-9">content here</div>
<div class="col-xs-3">content here</div>
</div>
</div>
我希望这能帮到您。
如果您不关心完美比例大小的列,这可以是一个解决方案:
<div class="row">
<div class="col-lg-9">content here</div>
<div class="col-lg-3 pl-0">content here</div>
</div>
添加类pl-0
基本上从第二列中删除15px
左边填充,仅允许第一列和第二列之间的15px
间隙。