如何在Bootstrap4网格的顶部制作全高div(从容器边缘的右侧滑出)

Question

我正在学习bootstrap 4。

我想要一个位于网格顶部的div(下面的内容(，全部位于网格右侧(而不是屏幕(，宽度为200px，高度为100%，固定。

我已经尝试了几种使用标记和CSS的解决方案，但我只能将其定位在用户屏幕的右侧。

额外信息：接下来，我想使用jQuery让它滑入滑出，但我想我自己可以解决。但定位让我头疼。

目前，我只是在试验一个完全基本的引导网格：

<div class="container">
<div class="row">
<div class="col-12">
Header row
</div>
<div class="col-12">
Middle row
</div>
<div class="col-12">
Bottom row
</div>
</div>
</div>

下面是一个线框来进一步解释我正在努力实现的目标。https://ibb.co/zFxJJZT

Answer 1

您需要将要放置在容器顶部的div绝对定位。在创建div位置absolute时，还需要使父对象相对定位。你应该读这篇文章才能更好地理解。

因此，只需在容器中添加div，并使其位置绝对。在Bootstrap 4中，您可以通过添加一个名为position-absolute的类来实现这一点。此外，为了使div不根据主体来定位自己，请在containerdiv中添加一个position-relative类。

.side-bar {
height: 100%;
width: 200px;
z-index: 2;
right: 0;
top: 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container position-relative bg-dark text-white col-6">
<div class="position-absolute side-bar bg-primary">
side
</div>
<div class="row">
<div class="col-12">
Header row
</div>
<div class="col-12">
Middle row
</div>
<div class="col-12">
Bottom row
</div>
</div>
</div>