twitter-bootstrap Bootstrap 导航栏显示为垂直列表...？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21958835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Navbar appears as vertical list...?
提问by FateNuller
So I'm following a tutorial online (http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/) and following the code exactly, but for some reason, my navbar is not appearing the way it should be. My friend (who's way more experienced with web dev) took a quick look at the code and couldn't figure out what was wrong. So I thought I'd post my problem here.
所以我正在关注在线教程（http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/）并完全遵循代码，但由于某种原因，我的导航栏没有出现它应该是。我的朋友（在 Web 开发方面更有经验）快速浏览了代码，但无法弄清楚出了什么问题。所以我想我会在这里发布我的问题。
I'll also show you my working directory (just in case you're wondering if the files are all in the same directory):
我还将向您展示我的工作目录（以防万一您想知道这些文件是否都在同一目录中）：
Here's the code in case you want to try it yourself
这是代码，以防您想自己尝试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<h1><a href="#">Bootstrap Site</a></h1>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
采纳答案by Sebsemillia
I'm asuming you are using the latest Bootstrap.
我假设您使用的是最新的 Bootstrap。
You have to add navbar-defaultto your <div class="navbar">and navbar-navto your <ul class="nav">.
您必须添加navbar-default到您的<div class="navbar">和navbar-nav到您的<ul class="nav">.
Which gives you the following markup.
这为您提供了以下标记。
<div class="container">
<h1><a href="#">Bootstrap Site</a></h1>
<div class="navbar navbar-default">
<div class="navbar-inner">
<div class="container">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
For future problems, try reading the official Bootstrap Docs before asking here. They explained everything very detailed.
对于未来的问题，请先阅读官方 Bootstrap 文档，然后再在这里提问。他们非常详细地解释了一切。
I guess your problem is, that the sitepoint tutorial uses an older Bootstrap Version, than the one you downloaded and use.
我猜您的问题是，站点教程使用的是较旧的 Bootstrap 版本，而不是您下载和使用的版本。
回答by Michael Morrison
I had a similar problem using bootstrap v4. The previous answers code worked well for me but just wanted to clarify that the part that made the vertical navbar horizontal was to use navbar-expand-lg in the main div tag.
我在使用 bootstrap v4 时遇到了类似的问题。以前的答案代码对我来说效果很好，但只是想澄清使垂直导航栏水平的部分是在主 div 标签中使用 navbar-expand-lg。
<nav class="navbar navbar-expand-lg">
Changing the lg to another size (md, sm or xs) is also helpful depending on your screen sizing preferences.
根据您的屏幕尺寸偏好，将 lg 更改为其他尺寸（md、sm 或 xs）也很有帮助。
Hope this helps
希望这可以帮助
回答by divHelper11
If you want your navbar to be always horizontal just make it like this:
如果你希望你的导航栏总是水平的，就让它像这样：
<nav class="navbar navbar-expand">
Using navbar-expand-lg|md|smwill make it always break at some point to vertical position.
使用navbar-expand-lg|md|sm将使它总是在垂直位置的某个点断裂。
回答by Bamboo Tech
came across your question because I was looking to create a vertical navbarwith bootstrap. I know that this question is to do the exact opposite, but since this thread was at the top of the pile on google while searching "bootstrap nav list vertical", I figured I'd leave the solution I found here.
遇到你的问题是因为我想用引导程序创建一个垂直的导航栏。我知道这个问题正好相反，但是由于这个线程在搜索“bootstrap nav list vertical”时位于谷歌的顶部，我想我会留下我在这里找到的解决方案。
For anyone who can't seem to get bootstrap to behave and render a vertical list, you can use the bootstrap class ".flex-column" in your tag to turn a horizontal list into a vertical one.
对于似乎无法让引导程序运行并呈现垂直列表的任何人，您可以使用标签中的引导程序类“.flex-column”将水平列表转换为垂直列表。
Here's the page in the Bootstrap documentation, scroll down till you find the subheading 'Vertical':
这是 Bootstrap 文档中的页面，向下滚动直到找到副标题“垂直”：
Cheers!
干杯!
回答by Malick
In my case I was trying some codes I found on internet based on Bootstrap version 3but my app was based on bootstrap version 4. There exist important differences between the two versions (see here).
就我而言，我正在尝试在 Internet 上找到的一些基于 Bootstrap版本 3 的代码，但我的应用程序基于 bootstrap版本 4。两个版本之间存在重要差异（请参阅此处）。
The following code based on v4 works for me :
以下基于 v4 的代码对我有用：
<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="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
The official documentation can be found here.
官方文档可以在这里找到。
回答by Nagaraj kumar
we should use pills or tabs //A grey horizontal navbar that becomes vertical on small screens // for tabs use - nav nav-tabs
我们应该使用药丸或标签//在小屏幕上变为垂直的灰色水平导航栏//用于标签使用 - 导航导航标签
<nav class="navbar navbar-expand-sm-bg-light">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href ="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href ="#">Projects</a></li>
</ul>
</nav>
