gpt4 book ai didi

html - Bootstrap 导航不正确

转载 作者:太空宇宙 更新时间:2023-11-03 23:17:24 25 4
gpt4 key购买 nike

我正在尝试使用这样的 Bootstrap 导航 one

但这是在 ROR 应用程序中,无论我做什么,它都会一直堆叠。

所以我决定创建一个简单的 HTML 文件,看看我在这里遗漏了什么。

这是代码:

<!DOCTYPE html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</body>
</html>

但是,如果您复制并粘贴该代码,您将看到的只是堆叠的所有内容,而不是像上面链接中那样的水平菜单。

我到底做错了什么?!?!??!?!?!

编辑上面的导航完全是从上面链接的 Bootstrap 页面中提取的。

最佳答案

您正在使用 Bootstrap 2.3.2文档,但包括 3.3.4 files然后你试图制作一个 2.3.2 navbar (这是行不通的)。

使用 Bootstrap 3.3.4 docs ,您的导航栏代码应如下所示:

<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</nav>

否则,如果您打算使用 2.3.2 文档,则需要修复 3 个包含的文件...

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>

关于html - Bootstrap 导航不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29957310/

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