Html 引导4侧导航

看一下Bootstrap4文档，很明显在侧面有一个左对齐的导航栏，它以其父级的整个高度作为中心滚动的主要内容。我一直在检查元素，试图对其进行反向工程，但不管我怎么努力，我似乎无法使我的专栏达到全高。关于如何使用Bootstrap 4实用程序类实现这一点，您有什么想法吗？

看起来他们使用的是一些自定义CSS，而不是内置的Bootstrap类

如果您检查元素，您将看到有一个名为bd sidebar的主容器类。看看CSS规则，你会发现类似这样的东西

@media (min-width: 768px)
.bd-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 4rem;
    z-index: 1000;
    height: calc(100vh - 4rem);
}

带你一行一行地看。 顶行是媒体查询，因此整个规则仅适用于768px或更大屏幕宽度

位置：sticky——这些人比我解释得更好——上面是一个供应商前缀版本

顶部：4rem-将顶部向下推4。这使得顶部导航栏清晰可见

z索引：1000-确保它位于特定内容的上方和下方

聪明的一点来了

高度：calc100vh-4雷姆

---

这是通过删除4个相对ems来计算该元素的高度记住我们之前希望从100vh清除的导航条高度。vh是视口高度，是整个视口高度的百分比。例如，10vh将解析为当前视口高度的10%。来源：

我还没有读过它，但fwiw，.@wazz这不是我要找的。侧栏导航……你看到左边的侧栏是全高的，中间的内容div是全高的，右边的所有的都超过了最大宽度？