我的引导导航栏中的菜单项是垂直堆叠而不是水平堆叠，如何修复？

Question

我正在关注Youtube视频来学习Bootstrap，尽管我一直在关注他们的所作所为，但我还是得到了一个不同的结果。

以下是Youtube视频- 初学者引导教程-6- Navbar

我已经做了一个导航条，但项目是垂直堆叠在右上角，而不是显示内联。

我找不到任何可能导致这种情况的排版，如果我已经完美地跟踪了视频，那么自这个视频制作以来，引导程序可能已经改变了吗？

码

​

<!-- video #6 Navigation -->
	<nav class="navbar navbar-default">
		<div class="container-fluid">
		
		<!-- Logo -->
			<div class="navbar-header">
				<a href="#" class="navbar-brand">PROJECTBOOTSTRAP</a>
			</div>
		
		<!-- Menu Items -->
			<div>
				<ul class="nav navbar-nav">
					<li class="active"><a href="#grid-system">Grid System</a></li>
					<li><a href="#text-styling">Text-styling</a></li>
					<li><a href="#tables">Tables</a></li>
				</ul>
			</div>
		</div>
	</nav>

​

Answer 1

您需要在代码中添加这一行：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

见完整的片段页。

​

	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  
  <nav class="navbar navbar-default">
		<div class="container-fluid">
		
		<!-- Logo -->
			<div class="navbar-header">
				<a href="#" class="navbar-brand">PROJECTBOOTSTRAP</a>
			</div>
		
		<!-- Menu Items -->
			<div>
				<ul class="nav navbar-nav">
					<li class="active"><a href="#grid-system">Grid System</a></li>
					<li><a href="#text-styling">Text-styling</a></li>
					<li><a href="#tables">Tables</a></li>
				</ul>
			</div>
		</div>
	</nav>

​