将嵌套行修复/对齐到Bootstrap 3中它的父列的底部

Question

在嵌入式3中将嵌套行对齐/固定到其父列（col-md-x）的底部？

这是bs3的结果：

这就是我想要的：

嵌套的div.row应该贴在右栏的底部

JSFiddle of current code

<div class="container">
    <div class="row">
        <div class="col-md-9">
            <p>...</p>
            <div class="row">
                <div class="col-md-6">
                    <p>...</p>
                </div>
                <div class="col-md-6">
                    <p>...</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <p>...</p>
        </div>
    </div>
</div>

Answer 1

这可以通过使用一些额外的CSS来实现，该类带来类似flexbox的功能来引导*

通过添加以下两个类来编辑HTML：

<div class="container">
    <div class="row row-eq-height"> <!--  add the .row-eq-height class -->
        <div class="col-md-9">
            <p>...</p>
            <div class="row bottom"> <!-- add the .bottom class -->
                <div class="col-md-6">
                    <p>...</p>
                </div>
                <div class="col-md-6">
                    <p>...</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <p>...</p>
        </div>
    </div>
</div>

将这些类添加到CSS中：

.bottom {
    position: absolute;
    bottom: 0;
    margin-right: 0;
}
.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

DEMOS：

as coded in this answer

with added styling for clarity

参考：

thanks acmetech

*用于实现此目的的display flex属性仅与IE9兼容

Answer 2

根据Bootstrap 3文档，可以通过添加.navbar-fixed-bottom类来实现给定容器的底部修复。

Reference link - Fixed to bottom