Twitter Bootstrapsグリッドシステムを使用して2つの列の間に行を追加する方法

Question

途中に行がある2列のレイアウト。

[      ] | [      ] 
[      ] | [      ] 
[      ] | [      ] 
[  Left Column  ] | [ Right Column  ] 
[      ] | [      ] 
[      ] | [      ] 
[      ] | [      ] 
[      ] | [      ] 

Answer 1

私は右...これ以下のコードをあなたの質問を得たと思います。下のインラインスタイルは説明のためのものです。スタイリングはCSSファイルに適用します。

<div class="container"> 
    <div class="row-fluid"> 
     <div class="span6" style="padding-right:20px; border-right: 1px solid #ccc;"> 
      <p>Some Contents Here...</p> 
     </div> 

     <div class="span6"> 
      <p>Some Contents Here...</p> 
     </div> 
    </div> 
</div> 

上記のコードは、this imageを出力します。

Answer 2

は私が右の48％幅と繰り返し背景を持つ中央2％のdiv要素である、あなたは左の列は、48％の幅で設定することができると思います。あなた自身は非常に似ているという回答に基づいて、それ

Answer 3

を処理する必要があります：境界線や行の背景：私はこの問題を攻撃するために2つの角度を示唆しているhttps://stackoverflow.com/a/11299934/1478467

。ここにはdemo (jsfiddle)があります。

背景オプションのサンプルの下では、複雑な背景を使用しない限り、行の幅を実際に制御しないという唯一の欠点があります。

<div class="row myBackground"> 
     <div class="span6">span6</div> 
     <div class="span6">span6</div> 
</div> 

/* Put here the background (color, images, etc.) that you want between the columns */ 
.row.myBackground { background: #F00; } 
/* This is the column background, for example white as the page background */ 
.row.myBackground > [class*="span"] { background: blue; } 

Answer 4

私のソリューションを使用しています：列の間に配置要素を配置する前に。それ以上のHTML要素は必要なく、.border-betweenクラスの直接の子.col- *要素にのみ適用されます。これは、.rowと同じ要素に適用する必要があります。 @Rossアンガス・ソリューションに基づいて

HTML

<div class="row border-between"> 
    <p class="col-sm-6">This column does not have a border, because it's a first child.</p> 
    <p class-"col-sm-6">This column has a border to the left</p> 
</div> 

CSS

.border-between > [class*='col-']:before { 
    background: #e3e3e3; 
    bottom: 0; 
    content: " "; 
    left: 0; 
    position: absolute; 
    width: 1px; 
    top: 0; 
} 

.border-between > [class*='col-']:first-child:before { 
    display: none; 
} 

Answer 5

私は高さを適合させる方法を見つけました。各列の境界線の上に置くだけです。

.grid--borderBetween > [class*='col-']:before, 
.grid--borderBetween > [class*='col-']:after { 
    background: #b2b2b2; 
    bottom: 0; 
    content: " "; 
    position: absolute; 
    width: 1px; 
    top: 0; 
} 
.grid--borderBetween > [class*='col-']:before { 
    left: 0; 
} 
.grid--borderBetween > [class*='col-']:after { 
    right: -1px; 
} 
.grid--borderBetween > [class*='col-']:first-child:before, 
.grid--borderBetween > [class*='col-']:last-child:after { 
    display: none; 
} 

Answer 6

user2136179で提供されるCSSを拡張すると、下の罫線を使用することもできます。 matchHeightを使用する必要がありますが、ブートストラップグリッドはテーブルグリッドのように見えます。 Check it out

// See the rest on codepen.io 
$(".border-bottom").children("div").matchHeight();