【问题标题】：bootstrap grid with border between columns具有列之间边界的引导网格
【发布时间】：2018-01-19 01:19:05
【问题描述】：
我怎样才能制作一个包含一行和两列内的引导网格。第一列大小为 9 col-md-9 和第二列大小为 3 col-md-3，无论内容在列内多长时间，行和列都会很好并且它们之间有边界。我该怎么做？它应该是这样的：
不是这样的：
这是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>
【问题讨论】：
标签：
html
css
twitter-bootstrap-3
bootstrap-grid
【解决方案1】：
一个通用的解决方案是使用 flexbox。
这将使您的列始终具有相同的高度。
这是一个小提琴：https://jsfiddle.net/Gt25L/1280/
（我想你必须添加特定的类，因为 rows 和 cols 太笼统了，但我相信你明白了）
.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>
【解决方案2】：
有点贫民窟，但您可以在行上使用背景色，而不是在列上，并仅在其中一列上添加边框（假设您总是在左列上有更多内容）
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;
}
【解决方案3】：
如果您不介意指定其中一个元素的宽度，可以使用负边距，然后按边距量增加宽度。
.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>
【解决方案4】：
您可以使用 boostrap4 (flexbox) 或使用 box-shadow 来绘制边框并将背景设置到父容器中：
绘制插图和起点阴影会使它们重叠，因此您不会注意到最高的盒子。
.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>
关于bootsrap 4https://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>
【解决方案5】：
您可以使用 <div class="col-xs-offset-1"> 包裹文本来抵消它，避免任何额外的 CSS。请参阅下面的 sn-p：
.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>