Bootstrap 4 centre de barre de navigation de la marque avec l'effondrement

Bootstrap 4 Alpha 6

Je ne peux pas semblent comprendre comment obtenir à la fois les liens à droite et à gauche lien à la fois de l'effondrement. Pour l'instant seuls le côté droit de la le lien s'effondre.

<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>
tous les éléments de menu doit venir dans l'un <div class="navbar-collapse collapse"> pour faire de l'effondrement de la fonctionnalité de travail.. le bouton à Bascule ne cible 1 de l'effondrement de la div et non plusieurs.

OriginalL'auteur Emanuel | 2017-04-19

  1. 1

    Actuellement en alpha 6, la chute n'en supporte qu'une seule cible..

    Mise À Jour De Bootstrap 4.1

    Vous pouvez absolue de la position de la marque sur de plus grands écrans, et l'utilisation d'un seul effondrement de l'2 navbars.

    @media (min-width: 768px) {
.navbar-brand
    {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

    http://www.codeply.com/go/Sh05HDqIh1

    Voir aussi:

    Centre d'un élément dans le Bootstrap 4 barre de navigation

    Comment le centre nav-éléments dans le Bootstrap?

    fonctionne parfaitement, merci!
    Cela rejoint les Boutons de Menu 🙁
    Comment alors? Avez-vous un exemple?
    L'exemple est dans votre code, suggère que vous essayez et cliquez sur un de vos liens de navigation, et vous pourriez réaliser que chaque fois que vous êtes à un clic sur le logo à la place. Facilement résolu avec un z-index: -1;
    Merci, j'ai mis à jour la réponse et l'exemple de Bootstrap 4.1.1

    OriginalL'auteur Zim

  2. 1
    <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>

    OriginalL'auteur Aslam

  3. 0

    Le code posté par ZimSystem du chevauchement entre les éléments de menu en raison d'avoir 100% de largeur et qui pourraient entrer en conflit avec les événements de clic etc. Une meilleure option serait d'utiliser gauche, au lieu de largeur.

    .navbar-brand
  {
    display: block;
    left: 50%;
    position: absolute;
    text-align: center;
  }
    Le problème avec le clic a été facile à résoudre dans ma réponse en supprimant width:100%

    OriginalL'auteur user3686910