Html 列之间带有边框的引导网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45619674/
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
bootstrap grid with border between columns
提问by user2818430
How can i make a bootstrap grid with one row and inside that 2 columns. First column size 9 col-md-9 and the second size 3 col-md-3 that no matter how long the content will be inside the columns the row and columns will be nice and border between them. How can I do it? It should look like this:
我怎样才能制作一个带有一行和两列内的引导网格。第一列大小为 9 col-md-9 和第二个大小为 3 col-md-3，无论内容在列内多长时间，行和列都会很好并且它们之间有边界。我该怎么做？它应该是这样的：
Not like this:
不是这样的：
Here is a jsfiddle
这是一个jsfiddle
.row > div {
background: lightgrey;
border: 1px solid grey;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
<div class="col-xs-9">
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br> <br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br> <br>Hifgdfgsdfg
</div>
<div class="col-xs-3">Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>
</div>
</div>回答by Dennis Novac
An universal solution would be to use flexbox.
一个通用的解决方案是使用 flexbox。
This will allow your columns to have always equal height.
这将使您的列始终具有相同的高度。
Here is a fiddle: https://jsfiddle.net/Gt25L/1280/
(I supposed you'd have to add specific class, because rowsand colsare too general, but I believe you got the point)
这是一个小提琴：https: //jsfiddle.net/Gt25L/1280/
（我想你必须添加特定的类，因为rowsandcols太笼统了，但我相信你明白了）
.row {
display: flex;
}
.row > div {
flex: 1;
background: lightgrey;
border: 1px solid grey;
}<div class='row'>
<div class="col-xs-9">
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br> <br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br> <br>Hifgdfgsdfg
</div>
<div class="col-xs-3">Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>
</div>
</div>回答by Christopher Messer
Slightly ghetto, but you could use background color on the row, not the columns, and add a border on just one of the columns (assuming you're always going to have more content on the left column)
有点贫民窟，但您可以在行上使用背景颜色，而不是在列上，并在其中一列上添加边框（假设您总是在左列上有更多内容）
https://jsfiddle.net/Gt25L/1277/
https://jsfiddle.net/Gt25L/1277/
<div class="container">
<div class='row'>
<div class="col-xs-9 border">
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br> Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br> <br>Hifgdfgsdfg
</div>
<div class="col-xs-3">Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>
</div>
</div>
</div>
.row {
background: lightgrey;
border: 1px solid grey;
}
.border {
border-right: 1px solid black;
}
回答by Michael Coker
If you don't mind specifying the width of one of the elements, you can use a negative margin, then increase the width by the margin amount.
如果您不介意指定其中一个元素的宽度，您可以使用负边距，然后按边距量增加宽度。
.row > div {
background: lightgrey;
border: 1px solid grey;
}
.row > div:last-child {
margin-left: -1px;
width: calc(25% + 1px);
}<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class='row'>
<div class="col-xs-9">
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>
<br>Hifgdfgsdfg
</div>
<div class="col-xs-3">Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>
<br>Hifgdfgsdfg
</div>
</div>回答by G-Cyrillus
You could use boostrap4 (flexbox) or play around with box-shadow to draw borders and set background into the parent container :
您可以使用 boostrap4 (flexbox) 或使用 box-shadow 来绘制边框并将背景设置到父容器中：
Drawing inset and outset shadows will make them overlap so you will not notice wich is the tallest box.
绘制插入和起始阴影将使它们重叠，因此您不会注意到哪个是最高的框。
.row {
background: lightgrey;
border-top: 2px solid grey;
box-shadow: 0 2px grey, inset 2px 0 gray, inset -2px 0 grey;
overflow: hidden;
}
.row>div {
box-shadow: 2px 0 grey, inset 2px 0 grey
}
/* demo purpose*/
.row {
margin: auto!important;
max-width: 80%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='row'>
<div class="col-xs-9">
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br> <br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br> <br>Hifgdfgsdfg
</div>
<div class="col-xs-3">Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>
</div>
</div>
<div class='row'>
<div class="col-xs-3">Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>
</div>
<div class="col-xs-9">
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br> <br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br> <br>Hifgdfgsdfg
</div>
</div>about bootsrap 4https://v4-alpha.getbootstrap.com/
关于bootsrap 4 https://v4-alpha.getbootstrap.com/
.row>div {
background: lightgrey;
border: 1px solid grey;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class='row'>
<div class="col-9 col-xs-9">
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br> <br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br> <br>Hifgdfgsdfg
</div>
<div class="col-3 col-xs-3">Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>
</div>
</div>
<div class='row d-flex'>
<div class="col-3 col-xs-3">Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>
</div>
<div class="col-9 col-xs-9">
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br> <br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br> <br>Hifgdfgsdfg
</div>
</div>
</div>回答by Agnaldo Luiz Cunha
You can use <div class="col-xs-offset-1">wrapping the text to offset it, avoiding any extra CSS. See the snippet below:
您可以使用<div class="col-xs-offset-1">环绕文本来抵消它，避免任何额外的 CSS。请参阅下面的片段：
.row > div {
background: lightgrey;
border: 1px solid grey;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
<div class="col-xs-9">
<div class="col-xs-offset-1">
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br> <br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br> <br>Hifgdfgsdfg
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-offset-1">
Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>Hifgdfgsdfg
<br>
</div>
</div>
</div>