html - DIV 之间的紧密差距

Question

如何缩小 DIV B 和 DIV C1 & DIV C2 之间的差距？

我读到 .row 是要在 container 中使用的。由于 container 具有填充以调整 .row 中的负边距。但是 DIV B 和 DIV C1 & DIV C2 之间有一个空白，虽然我没有使用 .row？

.fff {
  background-color: #088da5;
}
.ggg {
  background-color: #fbe9fa;
}
.iii {
  background-color: #8b7d6b;
}
.jjj {
  background-color: #9e0b0f;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-2 col-sm-3 col-md-2 fff">DIV A</div>
  <div class="col-xs-8 col-sm-6 col-md-8 ggg">DIV B</div>
  <div class="col-xs-2 col-sm-3 col-md-2">
    <div class="jjj">DIV C1</div>
    <div class="iii">DIV C2</div>
  </div>
</div>

Example fiddle

Answer 1

Bootstrap 列之间有间隙，以分隔元素。您可以在 cols 中使用 .row 类来避免这种差距，例如 this .

.fff {
  background-color: #088da5;
}
.ggg {
  background-color: #fbe9fa;
}
.iii {
  background-color: #8b7d6b;
}
.jjj {
  background-color: #9e0b0f;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-2 col-sm-3 col-md-2 fff">DIV A</div>
  <div class="col-xs-8 col-sm-6 col-md-8 ggg">DIV B</div>
  <div class="col-xs-2 col-sm-3 col-md-2">
    <div class="row">
      <div class="jjj">DIV C1</div>
      <div class="iii">DIV C2</div>
    </div>
  </div>
</div>