Question

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

我读到.row意图在container中使用。由于container有填充以调整.row中的负边距。但是DIV B和DIV C1 & DIV C2之间存在差距，但我没有使用.row？

＆＃13;

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

＆＃13;

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

＆＃13;

Example fiddle

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

DIV之间的差距很小

1 个答案: