Bootstrap 行的底部边框答案

【问题标题】：Bottom Border on Bootstrap RowBootstrap 行的底部边框
【发布时间】：2019-09-13 01:23:34
【问题描述】：

我正在使用 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>

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

理想情况下，我会使用.row 类向div 添加一个类，并且该行的添加将由样式表中的CSS 处理，但我无法弄清楚。主要障碍是该行的子divs 的左右填充为15px，因此如果我将底部边框添加到父行div，则该行将超出两端的标题内容。

有没有一种方法可以使用纯 CSS 完成我想要的？

【问题讨论】：

为什么不将border-bottom 分配给.row??
@FarzadYZ "主要的障碍是该行的子 div 具有 15px 左右的填充，所以如果我将底部边框添加到父行 div，则该行超出两端的标题内容。”

标签： css twitter-bootstrap-3

【解决方案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>

【讨论】：

完美，谢谢！我接近这个解决方案，但我试图将 HTML 放入类的 Content 属性中，我知道这不起作用。我不知道我可以用这种方式创建伪元素，感谢您向我介绍这个概念！
只是好奇，这非常适合让底部边框与 .row 齐平，而不必担心 .row 本身引起的负边距。有没有办法在 .row 上获得边框顶部刷新（因此在 .row 部分的顶部设置边框，使其与您的代码修复的完美边框底部相匹配）？希望这会奏效，但似乎没有： .row:before{border-top: 1px solid #CCC; }
使用:before 对我来说很好。示例：jsfiddle.net/5p6o8e4f
我需要 width: 100%，这将是一个很棒的 SASS mixin

【解决方案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>

【讨论】：

对我来说很好。但是 HTML 中的类调用应该是 '.row-bordered' 而不是 'row-border'。