css - Bootstrap 在具有多个元素的行中垂直对齐(到所有列)

Question

我使用 Bootstrap 行设计创建了一行。

<div class="row">
 <div class="col-xs-3 col-md-3">
<div class="heading">
<h1> Fist column h1 </h1>
</div>
<div class="content">
<p> First column p </p> 
</div>
 </div>
 <div class="col-xs-3 col-md-3">
<p> Second column p </p>
<p> Second column p </p>
<p> Second column p </p>    
 </div>
 <div class="col-xs-3 col-md-3">    
<h1> Third column h1 </h1>
<p> Third column p </p> 
<h1> Third column h1 </h1>
<p> Third column p </p>     
 </div>
 <div class="col-xs-3 col-md-3">
<div class="new-content">
<p> Fourth column p </p>    
</div>  
 </div> 

如何确保这一行与每一列垂直对齐？因此，无论每行中包含多少元素 - 它们始终在行高内与其他列垂直对齐(如果这有帮助，我们可以假设行高固定为 70px)。

请在这里找到 fiddle :https://jsfiddle.net/nkfdhpo3/

以及我想要实现的可视化图像:

Answer 1

如果我理解正确的话。您的问题是 h1 标签在顶部有 20 像素的边距。

要修复，请使用 css 将它们设置为 0。

h1 {
    margin-top: 0;
}

您可能希望将其应用于所有标题大小。

参见 https://jsfiddle.net/nkfdhpo3/1/