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

时间:2016-02-23 23:17:19

标签: css twitter-bootstrap

我使用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固定)。

请在此处找到小提琴:https://jsfiddle.net/nkfdhpo3/

可视化图像我想要实现的目标:

what i want to achieve - visualization

2 个答案:

答案 0 :(得分:1)

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

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

h1 {
    margin-top: 0;
}

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

请参阅https://jsfiddle.net/nkfdhpo3/1/

答案 1 :(得分:0)

$.ajax({
type: 'POST',
contentType: 'application/json',
url: "http://localhost:8000//mobile/hi.php",
date: name,
success: function(){alert("sent");}
});