Twitter Bootstrap等高列和内容对齐底部 [英] Twitter Bootstrap equal height columns and content aligned bottom

问题描述

我使用Twitter Bootstrap 3来布置网站，我需要实现一些具体的。我有一个两列布局，左边有一个图像，右边有一些文本...

i am using Twitter Bootstrap 3 for laying out a site and I need to achieve something specific. I have a two column layout with an image on the left and some text on the right...

<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/

我希望右栏中的文本位于底部

I would like the text in the right hand column to be positioned at the bottom of the column, but I would also like the column to always be an equal height of the one on the left.

推荐答案

To the column获得该布局，您将需要打破 float 引导规则。请尝试以下操作：

To get that layout you will need to break the float rules of bootstrap. Try this:

• 在行上添加一个类，以便稍后定位到这些列：

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

<div class="row t-cell">

然后用CSS使用 table-cell 像这样：

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

> DemoFiddle

Check this DemoFiddle

这篇关于Twitter Bootstrap等高列和内容对齐底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！