0

次のマークアップがあります。

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <ol class="nav">
                <li>
                    <a href="#">One</a>
                </li>
                <li>
                    <a href="#">Two</a>
                </li>
                <li>
                    <a href="#">Three</a>
                </li>
                <li>
                    <a href="#">Four</a>
                </li>
                <li>
                    <a href="#">Five</a>
                </li>
                <li>
                    <a href="#">Six</a>
                </li>
                <li>
                    <a href="#">Seven</a>
                </li>
                <li>
                    <a href="#">Eight</a>
                </li>
                <li>
                    <a href="#">Nine</a>
                </li>
                <li>
                    <a href="#">Ten</a>
                </li>                       
            </ol>
        </div>
    </div>
</div>

これは私のデスクトップでは問題なく動作しますが、ブラウザーのサイズ変更を開始すると、メニュー項目がラップし始めます。垂直ナビゲーションになると思います。私は何か間違ったことをしていますか？

ボタンを表示する JavaScript ソリューションなどは使用したくありません。JS を必要としない単純な CSS ソリューションが必要なだけです。Bootstrapがこれを処理してくれると思いました。

更新 1: どのように見えるか

ここに画像の説明を入力

更新 2: どのように見せたいか

ここに画像の説明を入力

4

1 に答える 1

1

ページの上部にあるレスポンシブ メタ タグを使用していることを確認し、他に何をしようとしているのかについては、特定のアドバイスに従う必要があります。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

追加のガイダンスとして、Twitter Bootstrap サイトのコード自体を確認することもお勧めします。

参照: http://twitter.github.com/bootstrap/scaffolding.html#responsive

アップデート

また、ナビゲーション バーで data-toggle を使用し、クラスを適切に設定していることを確認してください。

<div class="container">

  <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
  <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>

  <!-- Be sure to leave the brand out there if you want it shown -->
  <a class="brand" href="#">Project name</a>

  <!-- Everything you want hidden at 940px or less, place within here -->
  <div class="nav-collapse">
    <!-- .nav, .navbar-search, .navbar-form, etc -->
  </div>

</div>

レスポンシブ ナビゲーション バーには、折りたたみプラグインとレスポンシブ Bootstrap CSS ファイルが必要です。

参照: http://twitter.github.com/bootstrap/components.html#navbar

于 2012-10-21T14:14:28.057 に答える