Css 引导程序3：如何将列内容对齐到行的底部

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

绝对力把所有的柱子压在一起，有人能帮我吗？最终的结果是这样的：

---

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

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

工作示例

---

此外，这可能是一个可行的方法。

垂直对齐底部并移除浮动似乎有效。然后我有一个保证金问题，但是-2px使它们不会被压下（而且它们仍然没有重叠）

---

这里的例子：

我不知道为什么，但对我来说，马吕斯·斯坦斯库提出的解决方案打破了col的特异性（col-md-3后面跟着col-md-4将占据全部12行）

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

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

---

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

如何将列的内容放在底部

如何在一行中创建高度相等的列的多行库

如果列的总宽度小于12，而剩余宽度为奇数，如何水平居中

要解决前两个问题，请下载这个小插件

第三个问题在这里解决了

通用代码

[class*=col-]{position:relative}
.行一致性.到底部{位置：绝对；底部：0；左侧：0；右侧：0}
.row居中{文本对齐：居中}
.row居中[class*=col-]{显示：内联块；浮点：无；文本对齐：左；页边距右：-4px；垂直对齐：顶部}
$（文档）.ready（函数（）{
$（'.row一致性>[class*=col-]'）。一致性（）；
$（窗口）.on（'resize'，function（））{
$（'.row一致性>[class*=col-]'）。一致性（）；
});
});

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

我
创建最高的
列
我在底层

2.等高圆柱廊

我们都有相同的身高
...
...
...
...
...

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

...
...

所有课程都可以一起学习

...

可能与此重复您还可以找到更好的答案：这是浏览器对显示的支持：表格单元格：。我没有在其他浏览器中测试这个，但是我不明白为什么它不起作用。谢谢你的回复！我的意思是“display:table cell”是否会普遍忽略“s”之间的空白。但您必须确保在父容器上设置display:table，对吗？@Manticore是的，您必须在父元素上设置display:table。尼斯解决方案：）谢谢！为了保持Bootstrap的响应质量，您可能希望将此CSS封装在媒体查询中，如

@media（最小宽度：992px）

非常好！今天早上很辛苦！

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

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

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

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

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