：高度100％后用bootstrap空列

Question

Hellu！

我正在使用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上看到了其他一些帖子，但是他们要么不使用伪元素，要么他们有位置：绝对设置为列，我显然无法使用。

Answer 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>

在http://getbootstrap.com/css/#grid-offsetting

了解详情

Answer 2

我认为问题是你需要.divider（column）元素是父（行）高度的100％。我遇到了类似的问题，并得出以下结论：

1）如果你的分隔栏高度看起来太大，垂直，请尝试将溢出设置为'隐藏'

.divider { overflow: hidden;}

2）如果您根本没有看到divider伪元素，请尝试添加顶部和左/右定位，例如。

.divider:after {/*... other styles... */  top: 0px; right: 0px;}