Wie änderst du den Bootstrap 4 der Navbar-Kollapshöhe?

Ich versuche, eine Website mit voller Breite & FullHeight-Menü mit Bootstrap zu machen.Wie änderst du den Bootstrap 4 der Navbar-Kollapshöhe?

<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>

Wenn ich auf die navbar-toggler der navbar-Zusammenbruch Zusammenbruch collapse.show und kurz ich einen Stil gesehen werden = „height: 160px“ und es war verschwunden.

Wie mache ich es so, dass der Navbar-Kollaps collapse.show volle Höhe wird?

Jeder Zeiger würde sehr geschätzt werden.

Quelle

2017-09-26 Sariyanta Made

Haben Sie versucht, die Regel .colapse.show in Ihrem benutzerdefinierten CSS mit Höhe: 100vh zu überschreiben? –

tat ich, aber das Ergebnis ist, dass das Menü zweimal animiert. Die erste Animation bis zum 160px, und dann die zweite Animation, die den ganzen Bildschirm füllt. Ich versuche, es nur eine Animation zu machen. –

Das könnte daran liegen, dass die JavaScript-Methode von bootstrap an die navbar .collapse gebunden ist. (Juste testete es selbst) Die beste Chance, die Sie haben, ist vielleicht nicht die Verwendung der Bootstrap-Skripte und erstellen Sie Ihre eigenen für diesen Zweck von Grund auf. –

Wenn ich Sie richtig verstehe, dann glaube ich Ihnen dies erreichen durch ein anderes div innerhalb der NaVBA-Zusammenbruch div setzen und Ziel, dass, wenn der Bildschirm klein ist es Höhe zu erhöhen:

<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>

die Höhe anpassen der Klasse "justieren-Höhe" zu, was Sie wollen.

Quelle

2017-09-26 18:00:47 Laiman

Wie änderst du den Bootstrap 4 der Navbar-Kollapshöhe?

Antwort

Verwandte Themen