将div推送到父亲的底部

Question

我正在使用Bootstrap 3而且我有一排;在那行内我有2个col div。其中一个col div比另一个长。移动第二个col的正确方法是什么，所以它们看起来就位。

我不想使用bottom: 15px或top: 22px或使用保证金来实现它，因为它会让我编辑@media内容。

处理此类情况的正确方法是什么？

<div class="row">
  <div class="col-xs-6">
    <h2>Hello</h2>
  </div>
    <div class="col-xs-6">
      <button type="button" class="btn">Button</button>
    </div>
</div>

https://jsfiddle.net/DTcHh/37950/

预期：

颜色更容易理解：

Answer 1

此处的问题不是列的高度，而是h2标记与按钮相比的边距差异。所以你可以做这样的事情

h2:first-child {
    margin: 0;
    line-height: 34px;
}

行高将在那里与按钮的高度正确对齐...虽然这可能会导致其他问题，如果文本很长和响应。或者，您可以给按钮提供适当的保证金。或者你可以有一个第一列的小组。

您还必须考虑在任何一个地方可能有的任何内容变化。

Answer 2

Bootstrap为 margin top of 20px 元素应用 h2 。您可以通过定义类来覆盖 h2 元素的边距顶部。

.removeTopMargin {
   margin-top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
	<div class="col-xs-6">
		<h2 class="removeTopMargin">Hello</h2>
	</div>
	<div class="col-xs-6">
		<button type="button" class="btn">World</button>
	</div>
</div>