Bootstrap 4 - Aligner Horizontalement Inline Listes

Je suis à la migration d'un site web à partir d'Amorçage de 3,7 à Bootstrap 4. Dans mon site, j'ai une bannière dans la partie supérieure qui ressemble à ceci:

+-----------------------------------------------------------+
| Item 1   Item 2                      Item A Item B [note] |
+-----------------------------------------------------------+

Les éléments de la gauche sont dynamiques. Les articles sur la droite sont dynamiques. [Remarque] pièce montre de temps en temps. J'ai eu ce travail correctement avec Bootstrap 3.7. Cependant, lors de la migration vers Bootstrap 4, le contenu est entièrement aligné à gauche. Vous pouvez voir le résultat dans ce Bootply. Le code ressemble à ceci:

<nav class="navbar">
  <div class="d-inline-flex" style="width:100%;">
    <ul class="nav navbar-nav d-inline-flex">
      <li class="nav-item">
        <ul class="list-inline-mb-0">
          <li class="list-inline-item">Item 1</li>
          <li class="list-inline-item">Item 2</li>          
        </ul>
      </li>
    </ul>

    <ul class="nav list-inline justify-content-end">
      <li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
      <li class="list-inline-item">29th</li>                
    </ul>

    <div class="nav-item sub-nav-title float-md-right pr-0">[note]</div>
  </div>
</nav>

Je ne comprends pas pourquoi les articles sont tous alignés à gauche au lieu de remplir la largeur de la page. Ce qui me manque?

OriginalL'auteur user70192 | 2017-08-29

  1. 6

    Comme expliqué ici flotteur ne fonctionne pas dans la barre de navigation, car il est maintenant flexbox. Utilisation ml-auto de pousser les articles au droit. 

    <nav class="navbar">
  <div class="d-inline-flex" style="width:100%;">
    <ul class="nav navbar-nav d-inline-flex">
      <li class="nav-item">
        <ul class="list-inline-mb-0">
          <li class="list-inline-item">Item 1</li>
          <li class="list-inline-item">Item 2</li>          
        </ul>
      </li>
    </ul>
    <ul class="nav list-inline ml-auto">
      <li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
      <li class="list-inline-item">29th</li>                
    </ul>
    <div class="nav-item sub-nav-title float-md-right pr-0">[note]</div>
  </div>
</nav>

    https://www.codeply.com/go/CGBAvf8r1q

    Ou, vous pouvez utiliser mr-auto sur la première valeur liquidative.

    OriginalL'auteur Zim

  2. 0

    Pourriez-vous mettre votre [note] point avec votre deuxième liste non ordonnée et et utiliser justify-content-between dans votre emballage div élément? Il ressemblerait à quelque chose comme ça...

    <nav class="navbar">
  <div class="d-inline-flex justify-content-between" style="width:100%;">
    <ul class="nav navbar-nav d-inline-flex">
      <li class="nav-item">
        <ul class="list-inline-mb-0">
          <li class="list-inline-item">Item 1</li>
          <li class="list-inline-item">Item 2</li>          
        </ul>
      </li>
    </ul>

    <ul class="nav list-inline">
      <li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
      <li class="list-inline-item">29th</li>
      <li class="list-inline-item">[note]</li>
    </ul>

  </div>
</nav>

    OriginalL'auteur Jade Cowan