Bootstrap-4 center navbar Marke mit dem Zusammenbruch

Bootstrap-4 Alpha 6

Ich kann nicht scheinen, um herauszufinden, wie man sowohl die rechts-links und Links-link zu den beiden Zusammenbruch. Jetzt nur die Rechte Seite link zusammenbricht.

<nav id="topNav" class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">
    Menu
</button>
<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
    </ul>
</div>

<a class="navbar-brand mx-auto" href="#">NavBar</a>

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
    </ul>
</div>

alle Menüpunkte müssen, kommen in einem <div class="navbar-collapse collapse"> um den Zusammenbruch Funktionalität arbeiten.. Toggle-button wird nur Ziel-1-Kollaps div nicht mehrere.

InformationsquelleAutor Emanuel | 2017-04-19

1

~~Derzeit noch in der alpha 6, der Zusammenbruch unterstützt nur ein einzelnes Ziel.~~.

Update Bootstrap 4.1

Können Sie die absolute position der Marke auf größeren Bildschirmen, und mit einer einzigen Kollaps für die 2 navbars.
```
@media (min-width: 768px) {
.navbar-brand
    {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}
```
http://www.codeply.com/go/Sh05HDqIh1

Siehe auch:

Center ein element in der Bootstrap-4 Navbar

Wie center-nav-Elemente in Bootstrap?

funktionierte perfekt, danke!
Dies überschneidet sich die Menü-Tasten 🙁
Wie so? Haben Sie ein Beispiel?
Das Beispiel ist in deinem code, würde vorschlagen, dass Sie versuchen, und klicken Sie auf die navigation, und Sie vielleicht feststellen, dass jedes einzelne mal, wenn Sie klicken auf das logo statt. Leicht gelöst mit einer z-index: -1;
Danke, ich habe aktualisiert die Antwort und Beispiel für Bootstrap 4.1.1

InformationsquelleAutor Zim

<nav id="topNav" class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">
    Menu
</button>
  <a class="navbar-brand mx-auto" href="#">NavBar</a>

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
    </ul>
  <ul class="nav navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
    </ul>
</div>

InformationsquelleAutor Aslam

0

Den code gepostet von ZimSystem überlappen die Menüpunkte durch, mit 100% Breite und kollidieren könnten, mit click-events etc. Eine bessere Möglichkeit wäre die Verwendung von Links anstelle von width.
```
.navbar-brand
  {
    display: block;
    left: 50%;
    position: absolute;
    text-align: center;
  }
```
Das Problem mit dem klicken war einfach zu beheben, in meine Antwort durch das entfernen width:100%

InformationsquelleAutor user3686910

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.