:高度100%后用bootstrap空列

时间:2014-12-19 12:14:12

标签: css twitter-bootstrap

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

2 个答案:

答案 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>

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

了解详情

答案 1 :(得分:0)

我认为问题是你需要.divider(column)元素是父(行)高度的100%。我遇到了类似的问题,并得出以下结论:

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

.divider { overflow: hidden;}

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

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