Bootstrap网格列排水沟

Question

大家好， 我想像截图一样制作引导网格。但我正在努力解决各栏之间的问题。

第一行的border 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>