Question

当您使用Bootstrap创建并排div时，两侧都有一个排水沟，因此在两者之间有两倍的空间。你怎么避免这个？

<div class="col-lg-9">content here</div>
<div class="col-lg-3">content here</div>

这将在左侧和右侧为您提供15px的排水沟，但两个div之间的空间为30px。你如何使它成为一个15像素的空间？

Answer 1

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来完成。

Answer 2

您可以将列的填充减少为 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>

我希望这会对你有所帮助。

Answer 3

如果您不关心大小完全按比例的列，则可以采用以下解决方案：

<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间距。

Bootstrap双排水沟

3 个答案: