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

Question

在Bootstrap 3中，我有一行和三个列。我希望将其中两个列对齐到该行的底部，并将第一个列保留在顶部。当我使用传统方法，在父容器中使用相对位置和对两个列使用绝对位置时，我得到了奇怪的行为，我想这可能是由于Twitter Bootstrap中的某些原因导致的。下面是一个示例演示了发生了什么：

http://www.bootply.com/125735

绝对定位使所有列都叠在一起，有人能帮我解决吗？最终结果应该是像这样：

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

谢谢

- user1347026

---

可能是如何在Bootstrap流体布局中使网格元素底部对齐的重复问题。 - Marius Stănescu

在那里你也会找到更好的答案：https://dev59.com/MmYr5IYBdhLWcg3wOX66#28200097 - leymannx

Answer 1

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

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

这里有一个工作示例，请点击此处.

另外，这可能是一个可能的重复问题.

- Marius Stănescu

---

这里是 display: table-cell 的浏览器支持情况：http://caniuse.com/#search=table-cell。我没有在其他浏览器中测试过，但我不认为它不会起作用。 - Marius Stănescu

谢谢回复！我的意思是，'display: table-cell' 是否普遍忽略 <div> 之间的空格。 - jetlej

但是你必须确保在父容器上设置display:table，对吧？ - Manticore

@Manticore 是的，您必须在父元素上设置 display: table。 - Marius Stănescu

不错的解决方案 :) 谢谢！为了保持Bootstrap的响应特性，您可能希望将此CSS包装在媒体查询中，例如 @media (min-width: 992px)。 - sqsinger

Answer 2

竖直方向底部对齐并移除浮动似乎可以解决问题。然后我遇到了一个边距问题，但是使用-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;
}

这里有一个例子：http://www.bootply.com/125740#

- Tom Prats

---

太好了！今天早上这个问题让我很头疼！ - toesslab

Answer 3

通常在使用bootstrap时会遇到三个主要问题：

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

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

第三个问题在此处得到解决http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns

共同代码

<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. 将列的内容对齐到底部

<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. 等高列的图库

<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.列的水平居中对齐（小于12列单位）

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

所有类可以一起工作

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

- Vlad Alivanov

Answer 4

我不知道为什么，但对我来说Marius Stanescu提出的解决方案破坏了col的特定性（一个col-md-3后跟一个col-md-4将占据整个12行）

我找到了另一个可行的解决方案：

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

- Antt