0

Web アプリケーションで 2 つのナビゲーション バーを使用する必要があります。

ブートストラップ変数を使用して高さを変更したメイン ナビゲーション バー:

$navbarHeight: 80px;

しかし、最初のナビゲーションバーの下に高さ 40px のセカンダリナビゲーションバーを追加する必要があります。

現在、変数は両方のナビゲーション バーに影響を与え、セカンダリ ナビゲーション バーの CSS スタイルを変更しようとしても、それらを 80px に設定します。

これを達成する方法はありますか？

4

2 に答える 2

1

$変数の infront を使用しているので、 Sass を使用していると思います。

1. navbar に追加のクラスを追加します。

<div class="navbar navbar-small">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

2. Sass を介してクラスを定義する

$navbarHeightSmall = 40px; 

.navbar-small{
    .navbar-inner{
        min-height: $navbarHeightSmall;
    }

    &.navbar{
        .brand {
            padding: (($navbarHeightSmall - $baseLineHeight) / 2) 20px (($navbarHeightSmall - $baseLineHeight) / 2);
        }

         .divider-vertical {
            height: $navbarHeightSmall;
        }

       .nav > li > a{
            padding: (($navbarHeightSmall - $baseLineHeight) / 2) 15px (($navbarHeightSmall - $baseLineHeight) / 2);
        }
    } 
}

これを Sass 変数のスコープに含めるか、変数を再定義してください: $baseLineHeight.

JSFIDDLE のデモ

于 2013-03-21T11:44:21.340 に答える