Prevent Bootstrap navbar von Ändern der Größe

Ich habe die folgende Bootstrap-navbar ...Prevent Bootstrap navbar von Ändern der Größe

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Page 1-1</a></li> 
      <li><a href="#">Page 1-2</a></li> 
      <li><a href="#">Page 1-3</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
    </ul> 
    </div> 
</nav>

Das Problem, das ich mit diesem navbar ist, dass, wenn der Bildschirm kleiner gemacht wird, die Navigationsleiste ändert sich die Art und Weise es

angeordnet ist,

Vor resize ...

Nach resize ...

Wie verhindere ich, dass Bootstrap die Navigationsleiste neu anordnet? Welche Attribute sollte ich hinzufügen/löschen, um sicherzustellen, dass es immer wie das erste Bild aussieht. Überlauf ist erlaubt, ich muss nur sicherstellen, dass er seine Form behält.

Quelle

2016-03-19 Bolboa

Nun, ich weiß nicht genau, was ist dein Problem, aber ich hatte Probleme mit der bootstrap navbar mit 'container-fluid', versuchen Sie es nur mit der Klasse' container' und sehen was passiert. –

@ RodrigoAraújoValente Mein Problem ist, dass ich will, dass die Nav-Leiste immer eine feste Größe bleibt, auch wenn das Fenster in der Größe geändert wird. Ich habe versucht, es in "Container" zu ändern, aber es macht weiterhin das Gleiche – Bolboa

Haben Sie versucht, die Navbar in einem 'div' mit' Container' als Klasse zu wickeln? –

ich es herausfinden, ich geändert ...

<ul class="nav navbar-nav">

... zu einem regulären ul statt einer vordefinieren von Bootstrap, so habe ich es zu ...

<ul class="nav">

danach war es ziemlich einfach, schwebte ich jede ul links, so dass sie horizontal ausgerichtet wären. Dann legte ich sie alle in ein div mit einer festen Breite, um zu verhindern, dass sie kollabieren.

Quelle

2016-03-19 04:21:02 Bolboa

Es funktioniert nicht für mich. –

Öffnen Sie Ihre Debug-Tools können Sie sehen, gibt es viele Medienabfragen @media (min-width: 768px) Stilregeln, funktionieren diese Regeln nur, wenn die Bildschirmbreite größer als 768px. Wenn Sie also die Bildschirmgröße ändern, ändert sich der Stil der Navigationsleiste.

Wenn Sie den Stil auf allen Bildschirmgrößen beibehalten möchten, ändern Sie einfach diese Medienabfragen, damit diese Stilregeln auf allen Bildschirmgrößen funktionieren.

Quelle

2016-03-19 02:29:32 theJian

Prevent Bootstrap navbar von Ändern der Größe

Antwort

Verwandte Themen