html - 如何在 Bootstrap 中在网格中制作垂直线？

Question

如您所见，下面的网格是 bootstrap 网站在其网站上显示的内容，但是当您使用代码时，中间没有垂直线。

我找到了一些与此相关的答案，但那些来自最新版本的 Bootstrap ，所以再次询问。

<div class="row">   
<div class="col-xs-6">.col-xs-6</div>   
<div class="col-xs-6">.col-xs-6</div> 
</div>

Answer 1

他们通过添加边框来做到这一点，有几种方法可以做到这一点。

<div class="row">   
    <div class="col-xs-6 bordered">.col-xs-6</div>   
    <div class="col-xs-6 bordered">.col-xs-6</div> 
</div>

在你的样式表中:

.bordered {
    border: 1px solid #cccccc;
}

您可以围绕边框(border-right、border-left 等)进行规划，以获得您喜欢的效果。

这是一个 CodePen，所有东西都有边框，还有一个中间只有一个边框

CodePen