Question

看一下Bootstrap 4文档，侧面有一个左对齐的导航栏，当主要内容在中心滚动时，它会占据其父级的全部高度。我一直在检查试图对它进行逆向工程的元素，但是尽可能地尝试，我似乎无法使我的柱子达到全高。有关如何使用Bootstrap 4实用程序类实现此功能的任何想法吗？

Answer 1

看起来他们正在使用一些自定义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);
}

逐行指导你。顶行是媒体查询，因此整个规则仅适用于768像素或更高的屏幕宽度。

position:sticky - 这些人可以比我更好地解释它 - https://css-tricks.com/position-sticky-2/ - 上面是供应商前缀版本。

top:4rem - 将其顶部向下推4 'relative ems'。这使得顶部导航栏变得清晰。

z-index:1000 - 确保它位于特定内容的上方和下方。

这是聪明的一点！

height: calc(100vh - 4 rem)

此calculates此元素的高度是从100 vh删除4个相对的ems（请记住我们之前想要清除的导航栏高度）。 vh是视口高度，是整个视口高度的百分比。例如，10vh将解析为当前视口高度的10％（来源：https://css-tricks.com/fun-viewport-units/）

Bootstrap 4侧导航

1 个答案: