Html 引导4-将div垂直对齐到列的底部

我有一个两列布局，一个元素在左边，两个元素在右边

如何使右列中的最后一个元素与左列的底部相对对齐

裸启动引导模板










第1栏






…内容结束

第2栏
第3栏

这可能是您正在寻找的：

<div class="row">
    <div class="col-md-6">
        1
    </div>
    <div class="col-md-6">
        3
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        2
    </div>
    <div class="col-md-6">
        4
    </div>
</div>

1.
3.
2.
4.

或

1.
2.
3.

3.
4.

---

它将在任何屏幕大小上占据全宽。

通过将

.align items end

添加到父行，它会将列垂直对齐到其底部

如果您想让第3列位于顶部，但保留第4列的当前位置，我建议您查看一个名为jQuery的jQuery库。这将允许您将父列（

col-7

和

col-5

）拉伸到相同的高度，然后第3列应位于第1列的顶部

1





2.
3.
4.

请在第四列div中添加样式。
style=“位置：绝对；底部：0px；”
1







2.
3.
4.

您能草拟您希望列的显示方式吗？问题仍然不清楚请删除
标记您在左栏中使用的
标记，您是否希望第4个div与之对齐？我认为Dominic在这里只是想说明，他希望包含数字4的列与左栏底部垂直对齐（因此，具有“相同高度”正如我们在这里看到的数字2。这里有一个示例图片。br用于说明左栏的高度。我对行的错误，我更改了它，但没有帮助：（谢谢，但左侧的列高度要大得多，是一个元素，所以不可能有两个列。老实说，我仍然不确定你希望网格如何显示。你可以用油漆画一个，然后贴在这里以提高清晰度吗？？？@henry他希望左侧有一个列，右侧有两个列，其中第4列应始终位于底部（相对于左列）。2就像左侧的竞争结束。左侧的容器比右侧的两个容器大。因此，我们的用户体验专家发现，将这一行底部右侧的第二个容器对齐是一个好主意。问题是，左侧的col是一个元素，而且要高得多。因此，不可能使用2行。同样，左边的列是一个元素。2不像新行更像是元素的结尾。我在帖子中更改了它。所以现在应该更清楚了。Cheers在真实示例中看起来很好。对媒体查询进行一些测试。非常感谢！以更简单的方式告诉您；您将需要eqHeight（或类似值）库以确保柱的高度始终相等。只有这样，您才能开始垂直对齐柱内的元素。您也可以为这两个柱设置固定高度，但使用响应性设计通常会忽略此选项。

<div class="row">
    <div class="col-md-6">
        1
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                2
            </div>
            <div class="col-md-12">
                3
            </div>
        </div>
    </div>
</div>

<div class="col-5">
            <row class="no-gutters">
                <div class="col-lg-12">
                    3
                </div>

                <div class="col-lg-12">
                    4
                </div>
            </row>
        </div>

Why not use different row for 1 - 3  and 2 - 4.
Because you have using bootstrap grid system. 

7 col - 5 col
-------------

Kindly add style in fourth column div. 

style="position: absolute;bottom: 0px;"

<!-- Page Content -->
<div class="container-fluid">
        <div class="row">
    <div class="col-7">
        1 <br />
        <br />
        <br />
        <br />
        2
    </div>

    <div class="col-5">
        <div class="row no-gutters">
             <div class="col-12 align-self-end">
                3
            </div>  
            </div>
            <div class="row no-gutters"  >
             <div class="col-12 align-self-end" style="position: absolute; 
            bottom: 0px; ">
                4
            </div>             

        </div>
    </div>
 </div>
</div>