Question

我正在关注Youtube视频以学习Bootstrap，尽管我一直在遵循他们的工作方式，但我仍然得到了不同的结果。

关注此YouTube视频-Bootstrap Tutorial for Beginners - 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>

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

1 个答案: