由于行的负边距和列的填充，bootstrap列的底部边界超出了列

Question

我正在尝试向引导列添加底部边框，但由于行和引导列填充的负边距，它会越过列div。请参阅以下内容：

我有什么方法可以防止边境外出并仅在列内容中显示，如下所示？

<div class="container">
  <div class="row">

    <div class="col-md-12 add-border">
      A quick brown fox jumps over the lazy dog.
    </div>

  </div>
</div>

Answer 1

对你想要拥有边框的div应用填充：0（以下假设边框宽度为3px - 将其更改为适合）：

.add-border{
  padding:0;
  border-bottom:3px solid #000;
 }

如果你只想影响左右两边的填充（但不是顶部和底部），那么你可以使用以下内容：

.add-border{
  padding-left:0;
  padding-right:0;
  border-bottom:3px solid #000;
}

Answer 2

尝试此操作并使用after伪元素设置边框。

.add-border:after {
  content:'';
  width:270px;
  height:5px;
  background:black;
  position:absolute;
  left:13px;
  top:24px;
}