Hellu!
我正在使用Bootstrap并希望有一个充当分隔符的列,其设置如下所示:
<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>
.divider:after {
display: block;
content: '';
width: 1px;
background: #000;
height: 100%;
margin: 0 auto;
}
但是,我无法以100%的高度显示它。我尝试过为:: after设置不同的显示,在.divider和.row上设置100%的高度,但似乎没有任何效果。
我更喜欢这种方式,而不是边框,因为我可以更多地控制它(如果它有效)。
我在Stack Overflow上看到了其他一些帖子,但是他们要么不使用伪元素,要么他们有位置:绝对设置为列,我显然无法使用。
答案 0 :(得分:1)
如果您使用的是bootstrap网格,那么有一个类可以帮助您在列之间创建分隔符。为此,您必须将offset
与网格结合使用。这是代码的示例。
<div class="row">
<div class="col-md-7">
... content ...
</div>
<div class="col-md-4 col-md-offset-1">
... content ...
</div>
</div>
了解详情
答案 1 :(得分:0)
我认为问题是你需要.divider(column)元素是父(行)高度的100%。我遇到了类似的问题,并得出以下结论:
1)如果你的分隔栏高度看起来太大,垂直,请尝试将溢出设置为'隐藏'
.divider { overflow: hidden;}
2)如果您根本没有看到divider伪元素,请尝试添加顶部和左/右定位,例如。
.divider:after {/*... other styles... */ top: 0px; right: 0px;}