在网格系统/引导网格中的跨度边缘内放置边框或线

Question

你们都知道960 / 940px网格系统。我必须在一些跨度元素之间做一个带边框的布局，即

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

我的意思是，边界/分割线应该在两个跨度的中间，但是里面的间距边缘。

如果可能，它应该是没有图像的解决方案。

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;

}