Bootstrap 4对齐底部 [英] Bootstrap 4 align bottom

问题描述

我有一个整页的引导程序布局，并且在第一页上我需要与中间&对齐的内容.底部. 有一个背景图片(第一格)和一个较暗的图层(第二格).

I have a full-page bootstrap layout, and on the first page I need something aligned to middle & bottom. There is a background image (first div), and a darker layer on it (second div).

<div class="h-100 w-100">
<div class="h-100 w-100 text-center">
    <div class="h-100 w-100 d-flex align-items-center">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
            <h1 style="color:#000;">something</h1>  
            <a href="">
            www.something.com
            </a>
            <p class="tto_cl">
            <span style="font-size: 1.8rem;">123</span>
            </p>
            <span style="text-transform:uppercase; color:#000; letter-spacing: 4px; font-family: Arial;">456</span><br>
            </div>
    </div>
</div>

Jsfiddle: https://jsfiddle.net/543r2dcs/2/

Jsfiddle: https://jsfiddle.net/543r2dcs/2/

它们完全对齐中心，但是我需要一些底部.

They are aligned center perfectly, but I need something to bottom.

我想将456放到div的底部，但是这种新的flexbox系统对我来说并不常见.

I want the 456 to the bottom of the div, but this new flexbox system is unusual to me.

推荐答案

Bootstrap有一个非常方便的.align-bottom类.您可以在在此处

Bootstrap has a very handy .align-bottom class. You can read about it here

<span class="align-bottom">bottom</span>

这篇关于Bootstrap 4对齐底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！