html - 如何在 Bootstrap 4 网格顶部制作全高 div(从容器边缘右侧滑出)

Question

我正在学习 bootstrap 4。

我想要一个位于网格顶部(内容在下方)的 div，全部位于网格的右侧(不是屏幕)，宽度为 200 像素，高度为 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 时，您还需要使父级相对定位。你应该read this更好地理解。

因此，只需将 div 添加到容器中并使其定位为绝对位置即可。在 Bootstrap 4 中，您可以通过添加一个名为 position-absolute 的类来实现。还要使 div 不根据主体定位自身，将 position-relative 类添加到 container div。

.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>