如何使用Twitter Bootstraps网格系统在两列之间添加一行
如何使用Twitter Bootstraps网格系统在两列之间添加一行
提问于 2012-08-05 16:44:36
两列布局，中间有一条线。
[ ] | [ ]
[ ] | [ ]
[ ] | [ ]
[ Left Column ] | [ Right Column ]
[ ] | [ ]
[ ] | [ ]
[ ] | [ ]
[ ] | [ ]回答 7
Stack Overflow用户
回答已采纳
发布于 2012-08-06 13:18:36
我想我答对你的问题了..。这是下面的代码。下面的内联样式只是为了说明。您可以在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。
Stack Overflow用户
发布于 2015-03-30 16:42:51
我的解决方案使用: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;
}Stack Overflow用户
发布于 2015-12-18 19:28:31
基于@Ross Angus解决方案，我找到了一种适应身高的方法。只是将每个列的边框放在彼此的顶部。
.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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11815081
复制相关文章
相似问题
腾讯云开发者
