gpt4 book ai didi

html - nav navbar-nav 不可用?

转载 作者:行者123 更新时间:2023-11-28 00:35:41 25 4
gpt4 key购买 nike

<html>

<head>
<title>Bootstrap Navbars</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

</head>

<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Koffee</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign Up</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

</html>

代码 nav navbar-nav 在 bootstrap 版本 4 中不再工作了吗>?此代码仅适用于 bootstrap 3 吗?我从一个旧程序中获取了 navbar-nav 的代码 我没有得到 wt 我做错了任何帮助都会非常有帮助

最佳答案

请阅读migration documentation找出 bootstrap v3 和 v4 之间的区别。有couple important changes 导航栏!

以下内容适用于 bootstrap4:

<nav class="navbar navbar-light navbar-expand-md">
<div class="container">
<a href="#" class="navbar-brand">Koffee</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#bs-nav-demo">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Sign Up</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Login</a>
</li>
</ul>
</div>
</div>
</nav>

演示: https://jsfiddle.net/davidliang2008/6a3p7t2r/12/

navbar、toggler、nav、navbar-nav 等都有变化。我强烈建议您查看 Bootstrap 的文档!

关于html - nav navbar-nav 不可用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56412947/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com