Twitter Bootstrap等高列和内容底部对齐

Question

我正在使用Twitter Bootstrap 3布局网站，并需要实现特定的功能。我有一个两列布局，左边是图像，右边是一些文本...

<div class="row">
  <div class="col-xs-6">
      <img class="img-responsive" src="http://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col-xs-6">
      <p>
          This is some dummy content              
      </p>
  </div>
</div>

<style>    
.colright{background:green;color:white;}
</style>

我希望右侧列中的文本位于该列底部，但我也希望该列始终与左侧列的高度相等。

http://jsfiddle.net/52VtD/9054/

- fightstarr20

---

关于高度部分，请查看此问题：https://dev59.com/NWIk5IYBdhLWcg3wNru8 - Rvervuurt

Answer 1

要获得那种布局，您需要打破 Bootstrap 的 float 规则。尝试这样做：

• Add a class on the row to later target the columns:

  <div class="row t-cell">
  

• Then with CSS use table-cell like this:

  .t-cell > div {
      display:table-cell;
      float:none;
      vertical-align:bottom;
  }
  

请查看这个DemoFiddle。

- DaniP

---

我知道这是一个非常老的问题..根据你的回答，网格的响应能力会丧失。如果是这样，为什么要首先使用网格呢？ - pravin

嗨@pravin，你说得很有道理，我认为OP可以更好地回答这个问题......但我想像col-xs-6这样的网格类名的使用会给你一些其他属性，比如从Bootstrap CSS继承的width--padding--position。 - DaniP