2017-09-26 6 views
0

私はブートストラップを使って全幅&フルハイトメニューでウェブサイトを作ろうとしています。どのようにnavbar-collapse heightブートストラップ4を変更しますか?

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="true" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
</button> 
<div class="navbar-collapse collapse"> 
    <ul class="navbar-nav"> 
     <li class="nav-item"><a title="Home" href="#" class="nav-link">Home</a></li> 
     <li class="nav-item"><a title="Home" href="#" class="nav-link">Home</a></li> 
     <li class="nav-item"><a title="Home" href="#" class="nav-link">Home</a></li> 
    </ul> 
</div> 

私はナビゲーションバー-トグラーcollapse.showと簡単になっナビゲーションバー-崩壊の崩壊、私はスタイル=「高さ:160ピクセル」を見てクリックすると、それが消えていたし。

navbar-collapse collapse.showが完全な高さになるようにするにはどうすればよいですか?

すべてのポインタは非常に高く評価されるでしょう。私が正しくあなたを理解していれば

+0

カスタムcssの.collapse.showルールをheight:100vhで上書きしようとしましたか? –

+0

私はやったが、その結果、メニューは2回アニメーション化された。 160pxまでの最初のアニメーション、次に2番目のアニメーションが画面全体を満たします。私は1つだけのアニメーションにしようとしています。 –

+0

これは、ブートストラップのjavascriptメソッドがnavbar .collapseにバインドされている可能性があります。 (自分でテストしたjuste)ブートストラップのスクリプトを使用していない可能性があります。 –

答えて

0

は、その後、私はあなたがnavba-崩壊のdiv内の別のdivを置くことによってこれを達成できると信じて、画面はそれを高さを高くする小さい場合、そのターゲット:

<div class="navbar-collapse collapse"> 
    <dvi class="adjust-height"> 
    <ul class="navbar-nav"> 
     <li class="nav-item"><a title="Home" href="#" class="nav-link">Home</a></li> 
     <li class="nav-item"><a title="Home" href="#" class="nav-link">Home</a></li> 
     <li class="nav-item"><a title="Home" href="#" class="nav-link">Home</a></li> 
    </ul> 
    <div> 
<div> 

は、高さを調整しますクラス「調整高さ」をあなたが望むものに変更してください。

関連する問題