我需要能够用垂直线分隔两列:
<div class="container">
<div class="row">
<div class="col-md-6">
<p>some text here </p>
</div>
<div class="col-md-6">
<p>some more text here</p>
</div>
</div>
</div>
使用 CSS border-right:1px solid black
来实现这一点。 演示: http://jsfiddle.net/swm53ran/35/
.html:
<div class="container">
<div class="row">
<div class="col-md-6 border-right">
<p>some text here </p>
</div>
<div class="col-md-6">
<p>some more text here</p>
</div>
</div>
</div>
.css
.border-right {
border-right: 1px solid black;
}
必须整页打开才能看到边框!
在 CSS 中添加了媒体宽度子句,因此在移动设备友好的方面没有任何令人讨厌的边框。希望这有帮助!这将调整为最长列的长度。在.col-md-4和.col-md-6上测试,我的假设是它与其他版本兼容。虽然不能保证。
JSFiddle
.row {
overflow: hidden;
}
.cols {
padding-bottom: 100%;
margin-bottom: -100%;
overflow: hidden;
}
@media(min-width: 992px) {
.col-md-4:not(:first-child),
.col-md-6:not(:first-child) {
border-left: 1px solid black;
}
.col-md-4:not(:last-child),
.col-md-6:not(:last-child) {
border-right: 1px solid black;
margin-right: -1px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1>
.col-md-6
</h1>
<hr>
<div class="row text-center">
<div class="col-md-6 cols">
<p>Enter some text here</p>
</div>
<div class="col-md-6 cols">
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
</div>
</div>
<hr>
<h1>
.col-md-4
</h1>
<div class="row text-center">
<div class="col-md-4 cols">
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
</div>
<div class="col-md-4 cols">
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
</div>
<div class="cols col-md-4 cols">
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
</div>
</div>
</div>
我同意以前的,但我想再添加一个解决方案。
您可以使用列属性,如果这样做,则有一个列规则选项,该选项在列之间完美地添加了一行。在这里,您可以阅读并查看我的意思。