列之间有边框的引导程序网格

Question

我怎样才能制作一个包含一行和两列的引导网格。第一列大小为 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>

原文由 user2818430 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Dennis Novac 发布，翻译遵循 CC BY-SA 3.0 许可协议