0

次のコードを使用します。

<!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 を強制的に縦のリストにする方法はありますか?

4

2 に答える 2