如何使用Twitter Bootstraps网格系统在两列之间添加一行
两列的布局中间有一条线。
[ ] | [ ] [ ] | [ ] [ ] | [ ] [ Left Column ] | [ Right Column ] [ ] | [ ] [ ] | [ ] [ ] | [ ] [ ] | [ ] 我想我的问题是正确的…下面的代码。 下面的内联样式仅用于说明。 你在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>
上面的代码应该输出这个图像 。
我的解决scheme使用：before在列之间放置一个定位元素。 这不需要更多的HTML元素，只会应用于.border-between类的直接子元素.col- *元素。 这应该应用于与.row相同的元素。
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; }
基于@罗斯安格斯的解决scheme，我find了一种适应高度的方法。 只要放在每个其他列的边界顶部。
.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; }
基于这个非常类似的答案： https ： //stackoverflow.com/a/11299934/1478467
我会build议2个angular度来攻击这个问题：边界或行背景。 这里是演示（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; }
展开user2136179提供的CSS，您也可以做底部边框。 它需要使用matchHeight，但可以让你的Bootstrap Grid看起来像一个表格。 一探究竟
// See the rest on codepen.io $(".border-bottom").children("div").matchHeight();
我认为你可以设置左边栏是48％的宽度，右边是48％的宽度和中心2％的div与重复的背景。 你必须自己处理它
