引导 css 在 div 中使用 bg 图像粘贴到底部的文本答案

【问题标题】：bootstrap css make text in a div with bg image stick to bottom引导 css 在 div 中使用 bg 图像粘贴到底部的文本
【发布时间】：2023-03-04 08:07:04
【问题描述】：

我在 bootstrap col 中有一个带有 bg 图像的 div，现在我的计划是让 div 中的文本贴在底部我尝试过使用垂直对齐但似乎不起作用

我的html：

<div class="has-image col-md-6 nopadding">
            <div style="background-image: url('img/st-jansvliet.jpg');">
                <div class="stick-to-bottom">Sint Jansvliet- Antwerpen</div>
            </div>
 </div>

我的 CSS：

.stick-to-bottom{
  vertical-align: bottom;
}

带有 bg 图像的 div 的高度与我使用 jquery 设置的屏幕尺寸相对应

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

我已将其固定为绝对位置，如下所示：

position: absolute;
bottom: 0;
left: 5%;
right: 0;
top: 95%;

【讨论】：

呃...fixed 或 absolute 没关系。总之，享受吧！ :)
为什么不重要？
当您的内容小于页面宽度时。 :P如果比较多，又想让底栏一直显示，那么fixed比较好，如果内容后要到绝对底部，则需要absolute。希望很清楚。 :)
是的 :) 无论如何谢谢！

【解决方案2】：

在stick-to-bottom的Parent Div中添加css position:relative。否则，stick-to-bottom div有时可能在其Parent Div之外。然后添加这个

position: absolute;
bottom: 0;
left:0px;
right:0px;

它是所有环境的完美解决方案，可确保您的 stick-to-bottom 保留在其父 div 中。

【讨论】：