0

Twitter Bootstrap を使用して Web サイト全体を設計しましたが、ほとんどの部分で非常にうまく機能します。私は過去にかなりの数の CSS を作成しましたが、このようなフレームワークを作成したことはありませんでした。

私が抱えている主な問題は、ブラウザーが 600px 未満になり、ヘッダーがドロップダウンに凝縮されると (私が望む)、ドロップダウンが画像や、テキスト入力ボックスやその他のドロップダウン メニューなどの HTML 要素の後ろに表示されることです。

このヘッダー ドロップダウン メニューを不透明にして、他のすべての要素の前に表示する方法はありますか? コードをいくつか提供したいと思いますが、Twitter Bootstrap スタイルシートのどの部分が役立つかは特にわかりません。

<div class="navbar navbar-fixed-top">

              <div class="navbar-inner">

                  <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="/">Exployre</a>

                  <div class="nav-collapse">

                    <ul class="nav">

                      <li><a href="/map">Find</a></li>

                      <li><a href="/shareadventure">Share</a></li>

                      <li><a href="/home">Inspire</a></li>

                      <li><a href="/posts">Discuss</a></li>

                      <li><a href="/groups">Groups</a></li>

                      <li><a href="/profile">Profile</a></li>

                      <li><a href="/about">About</a></li>

                  <li>        

                        <form action="/search" class="navbar-search">

                          <div>

                            <input type="text" placeholder="Search" class="search-query pull-right" name="q" size="55" />

                          </div>

                        </form>

                        <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>

                      </li>



                    </ul>

                  </div><!--/.nav-collapse -->

              </div>

            </div>

これらのクラスはすべて、Twitter Bootstrap CSS を変更せずにそのまま使用できると思います。

4

1 に答える 1

1

ドロップダウンに定義された z-index よりも高い値の z-index が Web サイトのコンテンツにある可能性があります。

Twitter Bootstrap の LESS バージョンを使用している場合は、variables.less を開き、@zindexDropdown( 144 行目) を含む行を見つけます。デフォルト設定は 1000 ですが、コンテンツの z-index よりも大きい数値に変更できます。

通常の CSS を使用している場合は、ルール for .dropdown-menu( 2773 行目) で定義されています。

于 2012-10-31T20:41:40.403 に答える