html - 使用 bootstrap 3 将 div 中的文本对齐到底部

Question

我想在使用 bootstrap 的 wordpress 站点中将标题与容器底部对齐，该怎么做？

我尝试使用正向和相对定位，但我得到的 txt 与所有左侧或最顶部对齐..

这是我的代码:

<div class="container-fluid pre-content-banner">
    <div class="container">
    <div class="intro-title bottom-aligned-text">
        <h1><?php the_title(); ?></h1>
    </div>  
    </div>
    </div> <!-- end container fluid -->

CSS:

.pre-content-banner {
    height: 300px;
    background: white url("images/businessppl-bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}

.intro-title {
    position: relative;
    bottom: 0;
    left: 0;
}

我得到这个结果:

Answer 1

你只是把相对的转换成绝对的

.pre-content-banner {
    height: 300px;
    background: white url("images/businessppl-bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}

.intro-title {
    position: absolute;
    bottom: 0;
    left: 0;
}
.container{
    margin-bottom:30px /*this margin == height of h1*/
}

或者使用javascript改变元素的位置