css - :after height 100 % with bootstrap empty column

Question

你好!

我正在使用 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 设置为列，我显然不能使用。

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