引导栅格列间距

Question

​

​

大家好，我想让bootstrap网格像截图。但是我正在与列之间的间隔作斗争。

与第二行的col-md-4的边界相比，第一行的col-md-4的边界应该是垂直直线。

如何使col md-8应该把col-md-4的排水沟放在右边？

对此有什么解决方案吗？

Answer 1

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

这是一个fiddle

请注意，这只能通过bootstrap libraries (js + css)实现。

Answer 2

例如，可以将右边框添加到前两个.col-md-4块：

http://codepen.io/glebkema/pen/vXzxdV

​

/* Heart of the matter */
@media (min-width: 992px) {
  .gutter .col-md-4 {
    border-right: 12px white solid;
  }
  .gutter .col-md-4:last-child {
    border-right: none;
  }
}

/* Decorations */
.gutter .col-md-4 {
  background: #9c6;
}
.gutter .col-md-4:last-child {
  background: #69c;
}
.gutter .col-md-8 {
  background: #c69;
}
.gutter .row > div {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  min-height: 80px;
  padding: 4px 0 0 8px;
}
@media (min-width: 992px) {
  .gutter .row {
    margin: 8px 0;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container gutter">
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4:last-child</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4:last-child</div>
  </div>
</div>

​