jquery - Bootstrap 4 导航栏在更高处折叠

Question

我正在建立这个网站:http://test.ddavo.me我不知道为什么 Bootstrap 导航栏即使在大型媒体查询中也会折叠。另外，我无法使用 .bg-inverse 设置背景。顺便说一句:您看不到切换器，因为 navbar-inverse 似乎没有改变它。

Answer 1

我看了你的代码。看来您正在使用 Bootstrap 4 alpha类，例如 .navbar-toggleable-md，但您包含了测试版 CSS。我建议您坚持使用 beta version ，因为它有许多改进，并且进一步的版本将在此基础上构建。

您的导航栏中缺少 .navbar-expand-X 类。 X 应该是一个断点，“告诉”Bootstrap 导航栏应在哪个屏幕上展开。这个类(class)是required :

Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.

因此，删除 .navbar-toggleable-md 类并添加 .navbar-expand-md 类:

<nav class="navbar navbar-expand-md bg-inverse bg-faded fixed-top" style="background-color: #212121">
    ...
</nav>

此外，Bootstrap 4 beta 中没有 .bg-inverse 类。 These are可用的背景颜色类别:

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white