CSS Bootstrap 3：如何将列内容与行底部对齐

Bootstrap 3: How do you align column content to bottom of row

提问by user1347026

I have a row in Bootstrap 3 and 3 columns in that row. I want to align two of the columns to the bottom of the row and keep the first column at the top. When I use the traditional approach with position relative in the parent and absolute for both columns I get a weird behavior which I imagine is because of something in twitter bootstrap. Here's a bootply of what's happening:

我在 Bootstrap 3 中有一行，在该行中有 3 列。我想将两列与行的底部对齐，并将第一列保持在顶部。当我在父列中使用相对位置和两列绝对位置的传统方法时，我得到一个奇怪的行为，我想这是因为 twitter bootstrap 中的某些东西。这是正在发生的事情的引导：

http://www.bootply.com/125735

http://www.bootply.com/125735

The absolute forces all the columns on top of eachother, can anyone help me out? The end result is to have something like so:

绝对迫使所有列相互叠加，有人能帮我吗？最终结果是这样的：

http://fahadalee.wordpress.com/2013/12/31/bootstrap-3-help-how-to-alin-div-in-bottom/

http://fahadalee.wordpress.com/2013/12/31/bootstrap-3-help-how-to-alin-div-in-bottom/

Thanks

谢谢

回答by Marius St?nescu

You can use display: table-cell and vertical-align: bottom, on the 2 columns that you want to be aligned bottom, like so:

您可以在要对齐底部的 2 列上使用 display: table-cell 和 vertical-align: bottom，如下所示：

.bottom-column
{
    float: none;
    display: table-cell;
    vertical-align: bottom;
}

Working example here.

工作示例在这里。

Also, this might be a possible duplicate question.

此外，这可能是一个可能的重复问题。

回答by Tom Prats

Vertical align bottom and remove the float seems to work. I then had a margin issue, but the -2px keeps them from getting pushed down (and they still don't overlap)

垂直对齐底部并移除浮动似乎有效。然后我遇到了边距问题，但是 -2px 使它们不会被推下（并且它们仍然不重叠）

.profile-header > div {
  display: inline-block;
  vertical-align: bottom;
  float: none;
  margin: -2px;
}
.profile-header {
  margin-bottom:20px;
  border:2px solid green;
  display: table-cell;
}
.profile-pic {
  height:300px;
  border:2px solid red;
}
.profile-about {
  border:2px solid blue;
}
.profile-about2 {
  border:2px solid pink;
}

Example here: http://www.bootply.com/125740#

这里的例子：http: //www.bootply.com/125740#

回答by Vlad Alivanov

When working with bootsrap usually face three main problems:

使用 bootsrap 时通常面临三个主要问题：

1. How to place the content of the column to the bottom?
2. How to create a multi-row gallery of columns of equal height in one .row?
3. How to center columns horizontally if their total width is less than 12 and the remaining width is odd?

1. 如何将列的内容置于底部？
2. 如何在一个 .row 中创建一个等高列的多行画廊？
3. 如果总宽度小于 12 且剩余宽度为奇数，如何将列水平居中？

To solve first two problems download this small plugin https://github.com/codekipple/conformity

解决前两个问题下载这个小插件https://github.com/codekipple/conformity

The third problem is solved here http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns

第三个问题在这里解决了http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-central-columns

Common code

通用代码

<style>
    [class*=col-] {position: relative}
    .row-conformity .to-bottom {position:absolute; bottom:0; left:0; right:0}
    .row-centered {text-align:center}   
    .row-centered [class*=col-] {display:inline-block; float:none; text-align:left; margin-right:-4px; vertical-align:top} 
</style>

<script src="assets/conformity/conformity.js"></script>
<script>
    $(document).ready(function () {
        $('.row-conformity > [class*=col-]').conformity();
        $(window).on('resize', function() {
            $('.row-conformity > [class*=col-]').conformity();
        });
    });
</script>

1. Aligning content of the column to the bottom

1. 将列的内容对齐到底部

<div class="row row-conformity">
    <div class="col-sm-3">
        I<br>create<br>highest<br>column
    </div>
    <div class="col-sm-3">
        <div class="to-bottom">
            I am on the bottom
        </div>
    </div>
</div>

2. Gallery of columns of equal height

2. 等高柱廊

<div class="row row-conformity">
    <div class="col-sm-4">We all have equal height</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
</div>

3. Horizontal alignment of columns to the center (less than 12 col units)

3. 列到中心的水平对齐（小于 12 列单位）

<div class="row row-centered">
    <div class="col-sm-3">...</div>
    <div class="col-sm-4">...</div>
</div>

All classes can work together

所有班级都可以一起工作

<div class="row row-conformity row-centered">
    ...
</div>

回答by Antt

I don't know why but for me the solution proposed by Marius Stanescu is breaking the specificity of col (a col-md-3 followed by a col-md-4 will take all of the twelve row)

我不知道为什么，但对我来说，Marius Stanescu 提出的解决方案打破了 col 的特殊性（col-md-3 后跟 col-md-4 将占据所有十二行）

I found another working solution :

我找到了另一个有效的解决方案：

.bottom-column 
{
   display: inline-block;
   vertical-align: middle;
   float: none;
}