bootstrap-4 - 引导导航栏总是折叠
问题描述
我的导航栏总是折叠,我不确定出了什么问题,因为我从引导文档网站复制了代码。
这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>GSD Lexi - German Shepherd Dog</title>
<!-- Bootstrap CSS -->
<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">
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<!-- /navbar -->
您可以在此处查看完整代码:https ://codepen.io/brianquan/pen/oJKdWx
谢谢
解决方案
如果你正在使用bootstrap-alpha-6
,你不能使用navbar-expand-lg
这个类来显示你的折叠菜单,你需要使用navbar-toggleable-lg
它。
它看起来像下面
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>GSD Lexi - German Shepherd Dog</title>
<!-- Bootstrap CSS -->
<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">
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-toggleable-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<!-- /navbar -->
更新代码笔: https ://codepen.io/anon/pen/YdmRyg
推荐阅读
- html - flexbox 中缺少边距/填充
- llvm - “opt”生成的点调用图中的“外部节点”和无名节点是什么?
- marklogic-9 - 如何从另一个数据库中使用 MarkLogic DataHub importFlow
- pgbouncer - 是什么导致 pgbouncer 的 avg_wait_time > 0?
- arrays - 如何合并两个包含字符串的numpy数组单元格?
- javascript - 日期范围选择器 autoApply:true 不适用于 timePicker: true
- json - 字典的可解码 keyDecodingStrategy 自定义处理
- python - 在python中过滤字符和数字数据的最有效方法
- nativescript - Nativescript中基于平台的条件插件依赖
- vim - VIM LanguageClient 和 ALE 互操作/重叠