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/

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

Answer 1

要获得该布局，您需要违反引导程序的float规则。试试这个：

在行上添加一个类以便稍后定位列：
```
<div class="row t-cell">
```

然后用CSS使用table-cell，如下所示：

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

选中 DemoFiddle

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

1 个答案: