Bootstrap CSS底层类不起作用

Question

我希望消息位于背景图像之上。我希望消息被固定/卡住，使其与背景图像容器的底部对齐。底部：0；似乎什么也没做。我需要它来响应，所以我不能为底层设置一个固定的像素量。不知道我做错了什么？

.bg-img {
    z-index: 4;
    position: relative;
}
.bg-img img {
    width: 100%;
}
.message {
    position: absolute;
    z-index: 5;
    padding-top: 50px;
    padding-bottom: 50px;
    bottom: 0;
    background: rgba(232,218,193,0.03);
}

<section class="full-image-desc">
<div class="container-fluid message">
    <div class="row">
        <div class="col-xs-12 col-sm-offset-2 col-sm-8">
            <h1>Title</h1>
            <h2>Sub-Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum augue vitae magna ultricies, sit amet fermentum risus fringilla. Donec arcu eros, suscipit ut ornare id, tincidunt eget nisl. Pellentesque non massa quis nibh rutrum tempor a eget nisl. Vestibulum ut laoreet nulla, id posuere lectus. Nulla id est ligula. Mauris vitae ipsum sed metus eleifend interdum at ac tortor. Aliquam erat volutpat. Curabitur vel eleifend augue, eget consectetur purus. Sed imperdiet pulvinar urna at porta.</p>
        </div>
    </div>
</div>
<div class="bg-img">
   <img src="img/background-image.jpg" alt=""/>
</div>
</section>

Answer 1

要使其具有响应性，您需要元数据来告诉浏览器它在每个平台（台式机、平板电脑或手机）上的外观。至于要在图像顶部的文本，它们需要在同一个 div 中。

<div class="col-xs-12 col-sm-offset-2 col-sm-8" background="img/background-image.jpg">
            <h1>Title</h1>
            <h2>Sub-Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum augue vitae magna ultricies, sit amet fermentum risus fringilla. Donec arcu eros, suscipit ut ornare id, tincidunt eget nisl. Pellentesque non massa quis nibh rutrum tempor a eget nisl. Vestibulum ut laoreet nulla, id posuere lectus. Nulla id est ligula. Mauris vitae ipsum sed metus eleifend interdum at ac tortor. Aliquam erat volutpat. Curabitur vel eleifend augue, eget consectetur purus. Sed imperdiet pulvinar urna at porta.</p>
        </div>

这也可以在css中完成

div {
    background-image: url("img/background-image.jpg");
}

我建议使用 css 方式，因为从长远来看，它会让事情更容易找到。