次のコードを使用します。
<!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要素がいくつかの問題を引き起こしているようです。
折りたたみ可能なナビゲーション ボタンが の横にあるところまでブラウザーを縮小すると、.brand以下のリンクはリストを形成しません。
リンクがリストを形成するようにブラウザーを縮小すると、ボタンが の下に表示されます.brand。
ボタンと同じ行にボタンを配置し、下のリンク.brand を強制的に縦のリストにする方法はありますか?