我目前正在试用新版本的Bootstrap，使用更新的网格系统使用以下代码（JSFiddle）分割两列：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 hidden-xs-down">
Some content on the left that's going to be smaller than right
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
A <br/>
B <br/>
C <br/>
D <br/>
E <br/>
F <br/>
</div>
</div>每一列都匹配高度，这是我将要显示的内容当前不需要的属性。
我对此进行了搜索，发现它不在Bootstrap 3中，现在默认引入了Bootstrap 4。
在Bootstrap4上有flexbox实用程序，因此您可以添加。将项目开始与对齐。第行：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row align-items-start">
<div class="col-lg-4 col-md-4 col-sm-4 hidden-xs-down">
Some content on the left that's going to be smaller than right
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
A <br/>
B <br/>
C <br/>
D <br/>
E <br/>
F <br/>
</div>
</div>
这是因为引导使用flexbox。你不能把它关掉。
您可以做的是为内容使用语义元素。不要将文本放在有意义的div中，使用段落和链接。他们不会像柱子那么高。
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 hidden-xs-down">
<p>Some content on the left that's going to be smaller than right</p>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<ul>
<li>A </li>
<li>b </li>
<li>c </li>
<li>d </li>
</ul>
</div>
</div>