Dies ist meine einfache Navigationsleiste:
<div class="navbar navbar-fixed-top myfont" role="navigation">
<div class="">
<ul class="nav navbar-nav navbar-left">
<li>
<a class="navbar-brand" href="#">
<img src="assets/img/logo.png"/>
</a>
</li>
<li>
<button class="btn btn-navbar">
<i class="fa fa-edit"></i>
Create
</button>
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right">
<li data-match-route="/"><a href="#/page-one">Login</a></li>
<li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
</ul>
</div>
Ich möchte nur verhindern, dass dies zusammenbricht, weil ich es nicht brauche. Wie geht das?
Ich möchte vermeiden, 300.000 Zeilen CSS zu schreiben, um die Standardstile zu überschreiben.
Irgendein Vorschlag?
quelle
ul
s, nicht dasli
s). Was ist der beste Weg, um dies zu verhindern?!important
Aussagen sind hier nicht notwendig, bei mir funktioniert es ohne. Vermeiden Sie sie nach Möglichkeit (! Wichtig).Der Nabvar wird auf kleinen Geräten zusammenbrechen. Der Punkt des Zusammenbruchs wird durch
@grid-float-breakpoint
in Variablen definiert . Standardmäßig wird dies vorher768px
. Bei Bildschirmen unterhalb der Bildschirmbreite der768
Pixel sieht die Navigationsleiste folgendermaßen aus:Es ist möglich, die
@grid-float-breakpoint
in variables.less zu ändern und Bootstrap neu zu kompilieren. Wenn Sie dies tun, müssen Sie auch@screen-xs-max
in navbar.less ändern . Sie müssen diesen Wert auf Ihren neuen Wert setzen@grid-float-breakpoint -1
. Siehe auch: https://github.com/twbs/bootstrap/pull/10465 . Dies ist erforderlich, um Navigationsleistenformulare und Dropdowns am @ grid-float-breakpoint auch auf ihre mobile Version zu ändern.Am einfachsten ist es, den Bootstrap anzupassen
Variable finden:
auf eingestellt,
@screen-sm
können Sie es nach Ihren Bedürfnissen ändern. Ich hoffe es hilft!Für SAAS-Benutzer
Fügen Sie Ihre benutzerdefinierten Variablen wie
$grid-float-breakpoint: 0px;
vor dem hinzu@import "bootstrap.scss";
quelle
$grid-float-breakpoint: 0px;
@import "bootstrap.scss";
Hier ist ein Ansatz, bei dem das Standard-Kollapsverhalten unverändert bleibt, während ein neuer Navigationsabschnitt immer sichtbar bleibt. Es ist eine Erweiterung von
navbar
;navbar-header-menu
ist eine CSS-Klasse, die ich erstellt habe und die nicht Teil von Bootstrap ist.Fügen Sie dies in das
navbar-header
Element nachnavbar-brand
:Fügen Sie dieses CSS hinzu:
Überprüfen Sie die Geige: http://jsfiddle.net/L2txunqo/
Vorsichtsmaßnahme:
navbar-right
Kann zum visuellen Sortieren von Elementen verwendet werden, es wird jedoch nicht garantiert, dass das Element an den äußersten rechten Teil des Bildschirms gezogen wird. Die Geige zeigt dieses Verhalten mit demnavbar-form
.quelle
Wenn Sie nicht die Version mit weniger verwenden, müssen Sie die folgende Zeile ändern:
quelle
Die folgende Lösung hat in Bootstrap 3.3.4 für mich funktioniert:
CSS:
Fügen Sie dann die .no-Collapse- Klasse zu jeder der Listen und die .off- Klasse zum Hauptcontainer hinzu . Hier ist ein Beispiel aus Jade:
quelle
Eine andere Möglichkeit besteht darin, einfach
collapse navbar-collapse
aus dem Markup zu entfernen . Beispiel mit Bootstrap 3.3.7quelle