使用以下代码：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
div[class^='span'] {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Bootstrap Test</a>
<ul class="nav pull-right nav-collapse collapse">
<li class="active"><a href="#">Home</a></li>
<li class="divider-vertical"></li>
<li><a href="#">About</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="containter-fluid">
<div class="row-fluid">
<div class="span12">
<h1>Hello, world!</h1>
</div>
</div>
<div class="row-fluid">
<div class="span2">2</div>
<div class="span10">10</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
我得到以下信息：
然而，在 Bootstrap 站点上的示例中，所有折叠的链接都形成了一个垂直列表。关于我做错了什么的任何想法？
编辑：.pull-right取出导航<ul>并将其替换为<div class="span8">解决了一些问题。.brand不幸的是，我的元素似乎引起了一些问题。
如果我将浏览器缩小到可折叠导航按钮位于 my 旁边的位置.brand，则以下链接不会形成列表：
如果我缩小浏览器以使链接形成一个列表，则该按钮会在下面弹出.brand：
有没有办法使按钮与 保持在同一行.brand 并强制下面的链接形成垂直列表？