wake-up-neo.com

Zentrieren Sie ein Element in Bootstrap 4 Navbar

Egal, was ich versuche, ich kann in Bootstrap-Navigationsleiste nichts zentrieren, keine Lösungen dafür? 

Ich habe versucht, ein div hinzuzufügen, mit margin:0 auto; oder margin-right:auto; margin-left:auto;, center-block-Klasse. Nichts funktioniert, warum ist es so schwer etwas zu erreichen, das so einfach ist, dass ich nicht verstehen kann, was ich falsch mache?

Hier ist der aktuelle Code:

<nav class="navbar navbar-fixed-top navbar-dark main-nav">
<div class="container">
    <ul class="nav navbar-nav pull-left">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Download</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>

    <ul class="nav navbar-nav text-center">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav pull-right">
        <li class="nav-item">
            <a class="nav-link" href="#">Rates</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</div>

31
LuTz

In Bootstrap 4 gibt es ein neues Dienstprogramm namens .mx-auto. Sie müssen nur die Breite des zentrierten Elements angeben.

Ref: http://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

Anders als Bass Jobsens Antwort, die ein relatives Zentrum zu den Elementen an beiden Enden darstellt, ist das folgende Beispiel absolut zentriert.

Hier ist der HTML-Code:

<nav class="navbar bg-faded">
  <div class="container">
    <ul class="nav navbar-nav pull-sm-left">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-logo mx-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Brand</a>
      </li>
    </ul>
    <ul class="nav navbar-nav pull-sm-right">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 6</a>
      </li>
    </ul>
  </div>
</nav>

Und CSS:

.navbar-logo {
  width: 90px;
}
22
Victor

Aktualisiert für Bootstrap 4.1 und höher

Bootstrap 4 Die Navbar verwendet nun Flexbox, sodass der Website Name mit mx-auto zentriert werden kann. Die Menüs auf der linken und rechten Seite erfordern keine Schwebekörper. 

<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Download</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
        </ul>
        <ul class="nav navbar-nav mx-auto">
            <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Rates</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Help</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Navbar-Center mit mx-auto Demo

Wenn die Navbar nur einen einzigen navbar-nav hat, kann justify-content-center auch zum Zentrieren verwendet werden.

EDIT

In der obigen Lösung ist der Website Name zentriert relativ links und rechts navbar-nav. Wenn also die Breite dieser benachbarten Navs unterschiedlich ist, wird Website Name nicht mehr zentriert.

 enter image description here

Um dieses Problem zu beheben, kann eine der Flexbox-Workarounds für absolute centering verwendet werden ...

Option 1 - Position verwenden: absolut;

Da die Verwendung der absoluten Positionierung in der Flexbox in Ordnung ist, können Sie diese Option für das zu zentrierende Objekt verwenden.

.abs-center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Navbar-Zentrum mit absoluter Position Demo

Option 2 - Flexbox-Verschachtelung verwenden

Schließlich besteht eine weitere Option darin, das zentrierte Element ebenfalls display:flexbox und zentriert auszurichten. In diesem Fall muss jede Navbar-Komponente flex-grow:1 haben.

Seit Bootstrap 4 Beta ist die Navbar nun display:flex. Bootstrap 4.1.0 enthält eine neue flex-fill-Klasse, mit der jeder Nav-Abschnitt die Breite ausfüllt:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark main-nav">
    <div class="container justify-content-center">
        <ul class="nav navbar-nav flex-fill w-100 flex-nowrap">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Download</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">More</a>
            </li>
        </ul>
        <ul class="nav navbar-nav flex-fill justify-content-center">
            <li class="nav-item"><a class="nav-link" href="#">Center</a></li>
        </ul>
        <ul class="nav navbar-nav flex-fill w-100 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Help</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Navbar-Zentrum mit flexbox nesting Demo

Vor Bootstrap 4.1.0 können Sie die Flex-Fill-Klasse wie folgt hinzufügen ...

.flex-fill {
   flex:1
}

Ab 4.1 ist flex-fill in Bootstrap enthalten.


Bootstrap 4 Navbar-Center-Demos

Verbunden:
Wie zentriere ich Nav-Items in Bootstrap?
Bootstrap NavBar mit links, mittig oder rechts ausgerichteten Objekten

 enter image description here

45
Zim

Versuche dies. 

.nav-tabs > li{
    float:none !important;
    display:inline-block !important;
}

.nav-tabs {
    text-align:center !important;
}
1
Priya Rajaram

Ich hatte ein ähnliches Problem. Der Ankertext in meiner Bootstrap4-Navigationsleiste wurde nicht zentriert. Fügen Sie einfach text-center in der Klasse des Ankers hinzu.

1
Christy

verwenden Sie mx-auto erledigt den Job

<ul class="navbar-nav mx-auto">
1
Hezy Ziv

Siehe: https://stackoverflow.com/a/14146967/1596547 , jetzt können Sie verwenden:

<nav class="navbar navbar-light main-nav">
<div class="container text-xs-center">
    <ul class="nav navbar-nav pull-xs-left">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Download</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>

    <ul class="nav navbar-nav" style="display: inline-block;">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav pull-xs-right">
        <li class="nav-item">
            <a class="nav-link" href="#">Rates</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</div>
</nav>

wende text-xs-center auf deinen Container an und setze display: inline-block; für deine Liste. 

1
Bass Jobsen

aus den docs

Navbars können mithilfe von .navbar-text Textteile enthalten. Diese Klasse passt die vertikale Ausrichtung und den horizontalen Abstand für Textfolgen an.

ich habe die .navbar-text-Klasse auf mein <li>-Element angewendet, das Ergebnis ist also 

<li class="nav-item navbar-text">

dadurch werden die Links vertikal zu meiner Navbar-Marke img zentriert

0
austin

mache einen neuen Stil

.container {
    position: relative;
}
.center-nav {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: auto;
    max-width: 200px;
    text-align: center;
}
.center-nav li{
  text-align: center;
  width:100%;
}

Ersetzen Sie den Website-Namen UL durch unten

<ul class="nav navbar-nav center-nav">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
 </ul>

Hoffe das hilft..

0
Ajay Makwana