Beim Arbeiten mit der Twitter-Bootstrap-Navigationsleiste müssen Benutzer möglicherweise die Navigationslinks zentral ausrichten, statt wie standardmäßig links ausgerichtet . Um dies zu erreichen, nehmen Sie die folgenden Anpassungen mithilfe des CSS-Stylesheets vor.
Um die Navigationslinks in der Navigationsleiste zu zentrieren, implementieren Sie den folgenden CSS-Code:
<code class="css">.navbar .nav, .navbar .nav > li { float: none; display: inline-block; *display: inline; /* ie7 fix */ *zoom: 1; /* hasLayout ie7 trigger */ vertical-align: top; } .navbar-inner { text-align: center; }</code>
Um die Bootstrap-Standardeinstellungen beizubehalten und auf ein bestimmtes Navigationsleistenmenü abzuzielen, erstellen Sie eine benutzerdefinierte Klasse und wenden Sie sie auf den Navigationsleistencontainer an:
<code class="html"><div class="navbar navbar-fixed-top center"> <div class="navbar-inner"> .... </div> </div></code>
Zielen Sie dann auf die .center-Klasse im CSS-Stylesheet:
<code class="css">.center.navbar .nav, .center.navbar .nav > li { float: none; display: inline-block; *display: inline; /* ie7 fix */ *zoom: 1; /* hasLayout ie7 trigger */ vertical-align: top; } .center .navbar-inner { text-align: center; }</code>
Um Untermenüelemente linksbündig auszurichten, fügen Sie die folgende CSS-Regel hinzu:
<code class="css">.center .dropdown-menu { text-align: left; }</code>
Das obige ist der detaillierte Inhalt vonWie zentriere ich Navigationslinks in der Twitter Bootstrap Navbar?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!