css - グリッドシステム/ブートストラップグリッドのスパンのマージン内に境界線または線を配置します

Question

あなたは皆、960/940pxグリッドシステムを知っています。いくつかのスパン要素の間に境界線があるレイアウトを行う必要があります。

[margin | span2] [mar... + border + ...gin][span2]

つまり、境界線/分割線は2つのスパンの中央にある必要がありますが、間隔のマージンの内側にある必要があります。

可能であれば、画像を使用しないソリューションにする必要があります。

Answer 1

このアイデアはどのように初心者を探しますか？
http://jsfiddle.net/panchroma/8FEap/

左側に境界線が必要な場合は、クラス.borderLeftをスパンに適用します

<div class="row">
<div class="span6">span6</div>
<div class="span3 borderLeft">span3</div>
<div class="span3 borderLeft">span3</div>
</div><!-- end row -->

このCSSを使用します

.borderLeft { 

/* use border-box so border is applied inside the span and doesn't break the grid */

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

/* define your border */
border-left: 2px solid red;

/* remove the default bootstrap padding */
margin-left:10px !important;


/* make final adjustments to restore padding to span */
padding-left:10px;
margin-right:10px !important;

}