CSS 在引导程序中如何向行添加边框而不加起来？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19757832/
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
In bootstrap how to add borders to rows without adding up?
提问by PerseP
I'm using bootstrap version 3.0.1 to make a grid and when I add a border to the rows of the grid I can see that the rows that are together add up there borders, I get a thicker border.
我正在使用 bootstrap 3.0.1 版来制作网格，当我向网格的行添加边框时，我可以看到在一起的行在那里加起来边框，我得到了更粗的边框。
This is my code:
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Test</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 40px;
}
.container {
width: 420px;
}
div.row {
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="row heading">
<div class="col-md-12">Header</div>
</div>
<div class="row subheading">
<div class="col-md-12">Some text</div>
</div>
<div class="row footer">
<div class="col-md-12">Footer</div>
</div>
</div>
</body>
</html>
And this is what I get . How can I use the border without the adjoining rows adding up their borders?, ie: I want all rows with a border of 1px.
这就是我得到的。如何在相邻行不加边框的情况下使用边框？，即：我想要所有行的边框为 1px。
Thank you
谢谢
回答by Siddharth Sharma
You can remove the border from top if the element is sibling of the row . Add this to css :
如果元素是行的同级元素，则可以从顶部移除边框。将此添加到 css ：
.row + .row {
border-top:0;
}
Here is the link to the fiddle http://jsfiddle.net/7cb3Y/3/
这是小提琴的链接http://jsfiddle.net/7cb3Y/3/
回答by aaronmallen
Here is one solution:
这是一种解决方案：
div.row {
border: 1px solid;
border-bottom: 0px;
}
.container div.row:last-child {
border-bottom: 1px solid;
}
I'm not 100% its the most effiecent, but it works :D
我不是 100% 是最有效的，但它有效：D
回答by Steffan Perry
On my projects i give all rows the class "borders" which I want it to display more like a table with even borders. Giving each child element a border on the bottom and right and the first element of each row a left border will make all of your boxes have an even border:
在我的项目中，我为所有行提供了“边框”类，我希望它显示的更像是带有均匀边框的表格。为每个子元素的底部和右侧设置一个边框，每行的第一个元素设置一个左边框，这将使您的所有框都有一个均匀的边框：
First give all of the rows children a border on the right and bottom
首先给所有的行子项在右侧和底部设置一个边框
.borders div{
border-right:1px solid #999;
border-bottom:1px solid #999;
}
Next give the first child of each or a left border
接下来给每个或左边框的第一个孩子
.borders div:first-child{
border-left:
1px solid #999;
}
Last make sure to clear the borders for their child elements
最后确保清除其子元素的边框
.borders div > div{
border:0;
}
HTML:
HTML：
<div class="row borders">
<div class="col-xs-5 col-md-2">Email</div>
<div class="col-xs-7 col-md-4">[email protected]</div>
<div class="col-xs-5 col-md-2">Phone</div>
<div class="col-xs-7 col-md-4">555-123-4567</div>
</div>
回答by abigezunt
you can add the 1px border to just the sides and bottom of each row. the first value is the top border, the second is the right border, the third is the bottom border, and the fourth is the left border.
您可以将 1px 边框添加到每行的侧面和底部。第一个值是上边框，第二个是右边框，第三个是下边框，第四个是左边框。
div.row {
border: 0px 1px 1px 1px solid;
}
