ブートストラップグリッド列の側溝

Question

こんにちは皆、 私はスクリーンショットのように、ブートストラップグリッドを作りたいです。しかし、私は柱の間の溝に苦しんでいます。

第1行のボーダーcol-md-4は、第2行の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> 

ここでは、これがbootstrap libraries（JS + CSS）でのみ可能であることをfiddle

注意がある

Answer 2

たとえば、あなたが最初の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>