Question

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

Answer 1

我看了你的代码。您似乎正在使用Bootstrap 4 alpha类，例如.navbar-toggleable-md，但您包含了测试版CSS。我建议你坚持使用beta version，因为它有很多改进，而且还有其他版本。

您错过了导航栏中的.navbar-expand-X课程。 X应该是一个故障＆＃34;告诉＆＃34;导航栏应该在哪个屏幕上展开。这个课程是required：

Navbars需要使用.navbar包装.navbar-expand{-sm|-md|-lg|-xl}来进行响应式折叠和配色方案类。

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

Answer 2

如果要继续使用当前标记，则需要定位正确版本的Bootstrap。您的代码的目标是Bootstrap 4的Beta版本，但您的标记使用的是Alpha.6中的类。如果您取出与Beta相关的脚本和链接，并在项目中包含以下内容，您的代码将按预期工作。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

这是使用Boostrap 4 correct version的代码。

Bootstrap 4导航栏在更高的位置折叠

2 个答案: