Bootstrap行的底部边框

Question

我正在使用Bootstrap的网格系统为页面的一部分创建标题,如下所示:

<div class="row">
    <div class="col-sm-10">
        Heading Text
    </div>
    <div class="col-sm-2 text-right">
        <a href="#"><span class="glyphicon glyphicon-pencil"></span></a>
        <a href="#"><span class="glyphicon glyphicon-trash"></span></a>
    </div>
</div>

我想要做的是在标题行下面添加一条规则 - 一条水平线,这样它看起来像这样(这使用不同的图标,但不要担心):

我可以的结束标记之前添加此代码完全实现这一目标div与.row类:

<div class="col-sm-12">
    <div style='border-bottom:1px solid #ccc;'></div>
</div>

然而,即使我将样式移动到样式表,这在所有地方添加也似乎很麻烦.我显然能够append在jQuery中使用相同的效果(虽然这会导致它自己的问题),但我真正喜欢的是使用纯CSS实现这一点.

理想情况下,我想一个类添加到div与.row类和将在样式表CSS处理线的加入,但我不能弄明白.主要障碍是divs该行的子行具有左右15px的填充,因此如果我将底部边框添加到父行div,则该行延伸到两端的头部内容之外.

有没有办法可以用纯CSS完成我想要的东西？

Answer 1

你可以使用带有左边距和右边距的伪元素来克服填充问题:

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";

.row-bordered:after {
  content: "";
  display: block;
  border-bottom: 1px solid #ccc;
  margin: 0 15px;
}

<div class="container">
  <div class="row row-bordered">
    <div class="col-xs-10">
      Heading Text
    </div>
    <div class="col-xs-2 text-right">
      <a href="#"><span class="glyphicon glyphicon-pencil"></span></a>
      <a href="#"><span class="glyphicon glyphicon-trash"></span></a>
    </div>
  </div>
</div>

Answer 2

由于切换到 Flexbox，上述解决方案在 Bootstrap 4 中的工作时间更长，但一些修改修复了它：

.row-bordered {
  position: relative;
}

.row-bordered:after {
  content: "";
  display: block;
  border-bottom: 1px solid #ccc;
  position: absolute;
  bottom: 0;
  left: 15px;
  right: 15px;
}

<div class="row row-bordered">
  <div class="col-sm-10">
    Heading Text
  </div>
  <div class="col-sm-2 text-right">
    <a href="#"><span class="glyphicon glyphicon-pencil"></span></a>
    <a href="#"><span class="glyphicon glyphicon-trash"></span></a>
  </div>
</div>