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

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

我可以通过在 .row 类的 div 结束标记之前添加这段代码来完美地实现这一点:

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

但是，即使我将样式移动到样式表中，添加到各处似乎也很麻烦。我显然已经能够在 jQuery 中使用 append 实现相同的效果(尽管这已经引起了它自己的问题)，但我真正想要的是使用纯 CSS 来实现这一点。

理想情况下，我会使用 .row 类向 div 添加一个类，并且行的添加将由样式表中的 CSS 处理，但是我想不通。主要障碍是该行的子 div 左右有 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>