html - 为什么在调整浏览器窗口大小时我的导航菜单会消失?
问题描述
HTML
html {
height: 100%;
}
body {
background-image: url("https://cdn-images-1.medium.com/max/2000/1*M6iNwOtplNTw1EOTcUklkQ.png");
background-size: cover;
background-position: center;
color: white !important;
font-family: 'Raleway', sans-serif;
font-weight: 700;
}
nav .navbar-nav li a {
color: white !important;
font-family: 'Raleway', sans-serif;
font-weight: 700;
}
.navbar-brand {
color: white !important;
}
#content {
text-align: center;
padding-top: 27%;
text-shadow: 0px 4px 3px rgba(0,0,0,0.5);
}
<!DOCTYPE html>
<html>
<head>
<title>James McGill</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">J.M</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact me</a>
</li>
</ul>
</div>
</div>
</nav>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
我似乎无法弄清楚为什么会发生这种情况。请查看我的代码,并就如何使其工作给我一些建议。
正如您在 HTML 代码中看到的那样,我已经添加了切换按钮和图标,但它没有显示在浏览器上。
我在这里做错了什么?让我知道。
谢谢你。
解决方案
这是因为引导类navbar
并navbar-collapse
在您的 div: 中使用:这里:
<div class="collapse navbar-collapse" id="navbarResponsive">
这些是引导类,因此当您按原样使用它们时:当屏幕低于 768 像素时它们会崩溃:
@media (min-width: 768px)
导航栏 css 的解释在Bootstrap 站点上
推荐阅读
- javascript - 我通过动态添加脚本来加载 iframe。但是由于 $ 未定义而得到参考错误
- angular - 在 JHipster 应用程序中切换语言时如何更改日期区域设置?
- laravel - Laravel 中的过滤功能
- npm - “font-awesome”和“components-font-awesome”之间的区别?
- android - Android 应用程序在没有堆栈的情况下崩溃:如何调试?
- javascript - 如何将本地存储项目从 Cordova 应用程序持久保存到手机?
- node.js - mongoose 文档值可以是函数吗?
- qt-creator - 尝试在 qt creator 上运行项目时出现 [makefile:36:debug] Error1 错误
- windows - 如何在脚本中读取 Windows 7 上的通知栏?
- gcc - gcc 不会编译为可执行文件