css - 在网格系统/引导网格中的范围内放置边框或线

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;

}