将 div 定位在父 div 的底部 - 引导程序

Question

我正在尝试将div 放置在包含div 的底部。 https://prnt.sc/q2iasz

我尝试为父div 和position: absolute, bottom: 0position: relative，但代码似乎不起作用。如果我给一个fixed-bottom类，div 会一直垫底。

这是我的代码。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section class="fluid-container hero position-relative">
<div class="absolute-wrapper h-100">
<div class="row bg-white fixed-bottom">
<div class="container w-50">
<h1 class="content text-dark">left</h1>
</div>
<div class="container w-50">
<h1 class="content text-dark">right</h1>
</div>
</div>
</div>
</section>

这是截图。https://prnt.sc/q2ierd

我在定位上做错了什么吗？

Answer 1

看起来你需要一个自定义类，position-absolute：

.absolute-bottom {bottom:0;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section class="fluid-container hero ">
<div class="position-relative">
<img src="http://dummyimage.com/1200x300&text=fake_img_content" class="col m-auto ">
<div class="d-flex position-absolute  absolute-bottom w-100 ">
<div class="container bg-white  w-50">
<h1 class="content text-dark">left</h1>
</div>
<div class="container w-50">
<h1 class="content text-dark">right</h1>
</div>
</div>
</div> hello
</section>

Answer 2

fixed-bottom给出了元素position:fixed，这将使它相对于视口

改用.position-absolute

.hero{
background:red;
height:100px; /* to mimic other content which will give the parent height*/
}
.position-absolute{
bottom:0;
background:#ffffff7d;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section class="fluid-container hero position-relative">
<div class="absolute-wrapper h-100">
<div class="row position-absolute">
<div class="container w-50">
<h1 class="content text-dark">left</h1>
</div>
<div class="container w-50">
<h1 class="content text-dark">right</h1>
</div>
</div>
</div>
</section>