it-swarm.com.de

Center Navbar in Twitter Bootstrap 2.0

Angenommen, wir haben die folgende Markierung für die Navigationsleiste mit Twitter Bootstrap 2.0.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner pull-center">
      <ul class="nav">
      <li class="active"><a href="#">HOME</a></li>                        
      <li><a href="#contact">CONTACT</a></li>
      </ul>        
  </div>
</div>

Was ist der beste Weg, .nav in navbar-inner zu zentrieren?

Ich habe nur ein paar eigene CSS-Styles hinzugefügt:

@media (min-width: 980px) {
    .pull-center {
        text-align: center;
    }
    .pull-center > .nav {
        float:none;
        display:inline-block;
        *display: inline; *zoom: 1;
        height: 32px;
    }
}
23
opengrid

Überschreiben Sie die Breite des Containers in der Navigationsleiste von auto bis 960px.

.navbar-inner .container {width:960px;}
5
James Lawruk

Um es in der Mitte mit einer dynamischen Breite auszurichten, habe ich Folgendes verwendet:

HTML:

<div class="navbar">
  <div class="navbar-inner">
    <ul class="nav">
      ....
    </ul>
  </div>
</div>

CSS:

.navbar .navbar-inner {
    text-align: center;
}
.navbar .navbar-inner .nav {
    float: none;
    display:inline-block;
}

Ich habe es nicht getestet, aber ich denke, nur display:inline-block; könnte ein Problem sein, das in allen Browsern außer IE7 und niedriger unterstützt wird.

http://caniuse.com/inline-block

4
Tim Baas
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>
3
czlatea

Verwenden Sie einfach die Containerklasse gemäß http://Twitter.github.com/bootstrap/components.html#navbar zentriert mein Navi; Es ist jedoch eine feste Breite und die Formatierung ist deaktiviert (die Höhe der Navigationsleiste wird erhöht und es ist möglich, dass ich etwas falsch mache).

Es wäre schön, wenn das Navi in ​​einer fließenden, prozentualen Breite mit einer minimalen Breite zentriert wäre, basierend auf einer minimalen unterstützten Bildschirmgröße des Geräts und der Nowrap. (Ich bin ein Neuling für die Responsive Media-Abfragen, und vielleicht ist dies die bessere Alternative zu Prozent.)

Untersucht immer noch die minimale Breite und die Nowrap, aber eine andere Alternative zur festen Breite der Bootstrap-Containerklasse besteht darin, ein untergeordnetes Element der Navbar-Inner hinzuzufügen. Ich würde gerne wissen, ob es eine integrierte Bootstrap-Lösung gibt, wie z. B. die Zeilenflüssigkeitsklasse und die spanN-Klasse, aber ich konnte das Format auch im Navi nicht richtig formatieren.

<div style="margin-left: 15%; margin-right: 15%;">
1
s_t_e_v_e

Ich fand das nützlich und sauber:

<div class="navbar navbar-fixed-top">
  <div class="container">
      <ul class="nav">
      <li class="active"><a href="#">HOME</a></li>                        
      <li><a href="#contact">CONTACT</a></li>
      </ul>        
  </div>
</div>

wo, css ist:

.container {left:auto;right:auto}

Dadurch wird das div auf der Basis der Breite der aktuellen Navigationsleiste zentriert.

Die Reaktionsfähigkeit wird getrennt verwaltet. 

0
Emiliano Poggi