引导网格列装订线答案

【问题标题】：Bootstrap grid column gutter引导网格列装订线
【发布时间】：2017-02-25 13:14:01
【问题描述】：

大家好，我想制作像截图一样的引导网格。但我在列之间的排水沟中挣扎。

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

如何让col-md-8应该走右边col-md-4的排水沟？

有什么解决办法吗？

【问题讨论】：

【解决方案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) 才能做到这一点

【讨论】：

【解决方案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>

【讨论】：