你好!
我正在使用 Bootstrap 并希望有一个用作分隔线的列,其设置如下所示:
HTML
<div class="row">
<div class="col-md-7">
... content ...
</div>
<div class="col-md-1 divider"></div>
<div class="col-md-4">
... content ...
</div>
</div>
CSS
.divider:after {
display: block;
content: '';
width: 1px;
background: #000;
height: 100%;
margin: 0 auto;
}
不过,我无法让它以 100% 的高度显示。我已经尝试为::after 尝试不同的显示,在 .divider 和 .row 上设置 100% 高度,但似乎没有任何效果。
我更愿意使用这种方式,而不是使用边框,因为我可以更好地控制它(如果可行的话)。
我在 Stack Overflow 上看到过其他一些帖子,但他们要么不使用伪元素,要么将 position: absolute 设置为列,我显然不能使用。
最佳答案
如果您使用的是 Bootstrap 网格,那么有一个类可以帮助您在列之间创建分隔线。为此,您必须对网格使用 offset
。这是您的代码示例。
<div class="row">
<div class="col-md-7">
... content ...
</div>
<div class="col-md-4 col-md-offset-1">
... content ...
</div>
</div>
关于css - :after height 100 % with bootstrap empty column,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27565947/