webentwicklung-frage-antwort-db.com.de

Ändern Sie die Twitter-Bootstrap-Navbar

Ich habe versucht, die Twitter-Bootstrap-Navbar zu ändern. Im Moment sind alle Links auf die linke Seite ausgerichtet.

In einem anderen Beitrag habe ich gelesen, dass Sie dies verwenden

.tabs, .pills {
  margin: 0 auto;
  padding: 0;
  width: 100px;
}

Aber das hat bei mir nicht funktioniert

Was muss ich in der CSS ändern, damit dies geschehen kann?.

Jede Hilfe geschätzt

das ist mein Markup

layouts/Anwendung

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>

    <a class="brand">Newbridges</a>  

  <% if user_signed_in? %>
    <div class="nav-collapse">
      <ul class="nav ">
      <%= render "shared/navbarlogin" %>
    </div>

    <% else%>
    <div class="nav-collapse">
      <ul class="nav">

      <%= render "shared/navbar" %>
    </div>
    <% end %>

Ich habe das auch probiert

.nav > li {
  float: none;
  display: inline-block;
  *display: inline;
  /* ie7 fix */
  zoom: 1;
  /* hasLayout ie7 trigger */
}
.nav {
  text-align: center;
}
22
Richlewis

Sie können Ihr Nav-Menü zentrieren, indem Sie Ihre Menüelemente auf display:inline-block statt auf float:left setzen:

.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;
}

Ich schlage jedoch vor, dass Sie eine eigene Klasse erstellen, die auf Ihr Navbar-Menü ausgerichtet ist, auf das Sie zentrieren möchten. Auf diese Weise werden Sie die Bootstrap-Standardwerte nicht stören und sich mit anderen Nav-Abschnitten auf Ihrer Seite verwirren. Sie können es so machen:

Beachten Sie die .center-Klasse im Navbar-Container

<div class="navbar navbar-fixed-top center">
     <div class="navbar-inner">
        ....
     </div>
</div>

Und dann können Sie die Klasse .center so anvisieren:

.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;
}

Demo: http://jsfiddle.net/C7LWm/show/

Bearbeiten: Vergessen Sie nicht, die Untermenüelemente auf der linken Seite neu auszurichten. Dies ist der Fix:

CSS

.center .dropdown-menu {
    text-align: left;
}

Demo: http://jsfiddle.net/C7LWm/1/show/

50
Andres Ilich

Ich weiß, dass dies ein alter Beitrag ist, aber ich habe diesen Beitrag auch ein paar Mal in meinem Googeln bemerkt. Ich möchte den Rekord für das Zentrieren der Navbar in Twitter-Bootstrap aufstellen, da die derzeit akzeptierte Methode nicht falsch ist, aber nicht benötigt wird, da Twitter-Bootstrap dies unterstützt.

Es gibt tatsächlich eine bessere Möglichkeit, dies zu tun, als es manuell zu ändern. Dadurch wird der Code reduziert, wenn bereits in Twitter Bootstrap enthalten ist.

<div class="navbar navbar-fixed-top navbar-inverse">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">RIZEN</a>
            <ul class="nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Forums</a></li>
            </ul>
        </div>
    </div>
</div>

Nervenzusammenbruch
Die erste Zeile ist ziemlich einfach, da wir die Navbar erstellen, indem Sie sie auf eine feste Position im Ansichtsfenster nach oben setzen und dann das Weiß in Schwarz durch Invertieren des Farbthemas austauschen.

Als Nächstes werden wir die Navbar-innere zuweisen, die mehr oder weniger besagt, wenn möglich, eine Mindesthöhe festlegen. Hier kommen die eigentlichen Farbstylings und nicht die darüber liegende Linie.

Hier ist der WICHTIG Linie, während wir das flüssige Layout für die Navbar löschen und nur einen Container verwenden. Dadurch wird ein fester Rahmen mit Rändern festgelegt, der den inneren Inhalt am Bildschirm ausrichtet. Dies geschieht durch automatische Ränder und das Einstellen einer Breite.

Diese Methode wird das tun, was Sie möchten, da Sie kb tatsächlich in Header-Anforderungen speichern, indem Sie keinen zusätzlichen Code hinzufügen und das Gerüst ordnungsgemäß mit Twitter-Bootstrap verwenden und keinen zusätzlichen Code aufblähen. Ich habe diese Methode in meinen eigenen Projekten verwendet und wende sie in meinem aktuellen Projekt weiterhin an. Die Gefahr bei der Änderung von TBS (Twitter-Bootstrap) besteht darin, dass Sie die Codekonsistenz verlieren. Wenn Sie in der Zukunft Änderungen vornehmen möchten, müssen Sie sich im Kopf merken, was Sie geändert haben. Andernfalls funktionieren die Funktionen möglicherweise nicht wie beabsichtigt.

Hoffe das hilft. Wenn Sie ein funktionierendes Beispiel möchten, schauen Sie sich einfach die Homepage von Twitter bootstrap an, da es genau das hat.

3
Phreak Nation

Wenn Sie möchten, dass Leerzeichen auf beiden Seiten (vor "Projektname" und nach "Dropdown") symmetrisch sind, fügen Sie Folgendes hinzu:

.navbar .nav, .navbar .nav > ul
{
    float: right
}

Es scheint auch so, dass die Navbar bei Verwendung der folgenden (ab Bootstrap v2.0.4) immer noch nicht zentriert wird:

<div class="navbar navbar-fixed-top center">
      <div class="navbar-inner">
        <div class="container-fluid">
        .
        .
        .
        </div>
      </div>
</div>

Sie müssen zu wechseln 

<div class="navbar navbar-fixed-top center">
      <div class="navbar-inner">
        <div class="container">
        .
        .
        .
        </div>
      </div>
</div>

(Auszug aus dem von Andres gelieferten Sample; nur dass er die Änderung verpasst hat)

Jetzt klappt es bei mir ...

1
Gabriel

Das Zentrier-CSS von oben funktioniert nur bei nicht eingeblendeten Navigationsleisten gut.

Es ist jedoch nicht ideal, wenn die Navbar zusammengebrochen ist. Standardmäßig befindet sich jedes ausgeblendete Navbar-Element in einer eigenen Zeile wie ein Dropdown-Menü. Die obige css versucht jedoch, alle zusammengefallenen Elemente in dieselbe Zeile zu verschieben, was weniger als ideal ist.

Ich habe diese kleine Korrektur des Einwickelns der Zentrierungs-CSS in einer Medienabfrage verwendet, sodass sie nur für nicht komprimierte Navigationsleisten ausgelöst wird:

@media (min-width: 768px) {
    .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;
    }
}

(getestet mit Bootstrap 3.1.1)

0
terrymorse