列之间有边框的自举网格

Question

如何使用一行和内部的2列创建引导网格.第一列大小为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>

Answer 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>

Answer 2

您可以使用<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>