CSS Bootstrap 行的底部边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35505071/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bottom Border on Bootstrap Row
提问by Philip Stratford
I am creating a heading for a section of a page using Bootstrap's grid system, like so:
我正在使用 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>
What I want to do is add a rule - a horizontal line - below the heading row, so that it looks like this (this uses different icons, but don't worry about that):
我想要做的是在标题行下方添加一条规则 - 一条水平线，使其看起来像这样（这使用了不同的图标，但不要担心）：
I can achieve this perfectly by adding this code before the closing tag of the divwith the .rowclass:
我可以的结束标记之前添加此代码完全实现这一目标div与.row类：
<div class="col-sm-12">
<div style='border-bottom:1px solid #ccc;'></div>
</div>
However, this seems cumbersome to add in all over the place, even if I move the styling to the stylesheet. I've obviously been able to achieve the same effect using appendin jQuery (though that has caused issues of its own), but what I'd really like is to accomplish this using pure CSS.
然而，即使我将样式移动到样式表，在所有地方添加这似乎都很麻烦。我显然已经能够append在 jQuery 中实现相同的效果（尽管这会导致其自身的问题），但我真正想要的是使用纯 CSS 来实现这一点。
Ideally, I'd add a class to the divwith the .rowclass and the adding of the line would be handled by CSS in the style sheet, but I can't figure it out. The main obstacle is that the child divsto the row have padding of 15px left and right, so if I add the bottom border to the parent row div, the line extends beyond the header content at either end.
理想情况下，我想一个类添加到div与.row类和将在样式表CSS处理线的加入，但我不能弄明白。主要障碍是divs该行的子行的左右填充为 15px，因此如果我将底部边框添加到父行div，则该行会延伸到两端的标题内容之外。
Is there a way I can accomplish what I want using pure CSS?
有没有办法可以使用纯 CSS 完成我想要的事情？
回答by Turnip
You could do this with a pseudo element with left and right margin to overcome the padding issue:
您可以使用带有左右边距的伪元素来解决填充问题：
@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>回答by Ben Comroe
The solution above longer works in Bootstrap 4 due to switching to Flexbox, but a few modifications fixes it:
由于切换到 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>