0

Twitter Bootstrap 2.0.4 + bootstraps Respond.css を使用してサイトを作成しています。私が知らないのは、サイトの左上にロゴを表示し、ロゴの右側にナビゲーションバーを表示することは可能ですか (ただし、上部に固定されています)? サイズを変更すると、ロゴがナビゲーションバーの上に表示されます。

まだ何も役に立たなかったので、答えが得られて本当にうれしいです。

ごきげんよう、ドミニク

編集:これは私が達成したいことを説明する写真です: http://i.imgur.com/HX3ZM.png

左にロゴ、次にナビゲーションバー。

4

2 に答える 2

2

わかった。固定ナビゲーション バーを使用しましたが、期待どおりに機能しませんでした。静的なナビゲーション バーを使用する必要があります。次に、ブートストラップの行/足場システムを使用できます。

navbar から左にロゴのサンプル コード:

   <div class="row-fluid">
    <div class="span3">
      <p><img src="/sites/img/your_logo.png" alt="Logo" class="responsive-logo"></p>
    </div>
    <div class="span9">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="container">
            <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>
            <div class="btn-group pull-right">
              <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                <i class="icon-user"></i> Username
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="#">Profile</a></li>
                <li class="divider"></li>
                <li><a href="#">Sign Out</a></li>
              </ul>
            </div>
            <div class="nav-collapse">
              <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div><!-- end navbar -->
    </div><!-- end span8 -->
  </div><!-- end row -->

ロゴをレスポンシブにするために、次の css ルールを追加しました。

  .responsive-logo {
max-width: 100%;
height: auto;
border: 0;
padding-top: 10px;

}

于 2012-07-12T17:36:23.100 に答える
1

はい、そうです。(たとえば) ナビゲーション バーの上に span4 クラスの div を配置するには、ドキュメントを再構築する必要があります。

その下に、navbar コードを配置し、ブランド要素 (通常はロゴを含む) を削除します。私の仮定は、あなたが次のようなものを望んでいると私に信じさせます:

再設計

あなたが望むものについてもう少し具体的に、および/またはサイトの関連部分 (HTML) を提供していただければ、もう少し方向性を示すことができます.

于 2012-07-12T06:18:20.770 に答える