css - 在一行内使列高度均匀

Question

如何在 bootstrap 中控制列，以保持它们的高度相同，内部文本长度不同，并使文本保持在顶部？

我需要的例子:

这是到目前为止的标记:

<div class="row-same-height row-full-height">
<div class="col-xs-6 col-xs-height col-full-height warning"><div class="item"><div class="content "><h2>No cost, as long as you want the contents of the columns to be centered between the top and bottom</h2></div></div></div>
<div class="col-xs-3 col-xs-height col-full-height"><div class="item"><div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium facilisis volutpat. Pellentesque finibus diam nec commodo eleifend. Pellentesque varius felis ac metus vestibulum, id vestibulum mi congue. Vestibulum quis sem ultrices, pharetra est id, pretium neque. Maecenas pulvinar urna vel orci tincidunt, eu consequat magna efficitur. Maecenas commodo mi erat, id placerat ipsum dignissim at. Nunc sed laoreet lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer a sapien at dolor pulvinar pretium quis eget ligula.</div></div></div>
<div class="col-xs-2 col-xs-height col-full-height"><div class="item"><div class="content">Yes, really </div></div></div>
<div class="col-xs-1 col-xs-height col-full-height"><div class="item"><div class="content"></div></div></div>

</div>

Answer 1

你可以使用 CSS3 的 flexbox 模型来完成这个:

.row-same-height {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

http://jsfiddle.net/5vrutebn/