Bootstrap-4 - Horizontal Ausrichten Inline-Listen

Ich bin der Migration einer website von Bootstrap 3,7 auf Bootstrap 4. In meiner Website habe ich einen banner über die Spitze, die wie folgt aussieht:

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

Elemente in die Links dynamisch sind. Die Elemente auf der rechten Seite sind dynamisch. Die [Hinweis] Stück zeigt gelegentlich. Ich hatte diese korrekt mit Bootstrap 3.7. Allerdings, wenn Sie auf Bootstrap 4, die Inhalte sind alle Links ausgerichtet. Sie können sehen, das Ergebnis in diesem Bootply. Der code sieht so aus:

<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>

Ich verstehe nicht, warum die Artikel sind alle Links ausgerichtet, anstatt füllen die Breite der Seite. Was bin ich?

InformationsquelleAutor user70192 | 2017-08-29
  1. 6

    Als hier erklärt float funktioniert nicht in der navbar da es jetzt flexbox. Verwenden ml-auto schieben Sie die Elemente auf der rechten Seite. 

    <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

    Oder Sie können mr-auto auf der ersten nav.

    InformationsquelleAutor Zim
  2. 0

    Könnten Sie Ihre [note] Element in der zweiten ungeordnete Liste und verwenden Sie justify-content-between in Ihrer Verpackung div element? Es würde in etwa so Aussehen...

    <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>
    InformationsquelleAutor Jade Cowan
Schreibe einen Kommentar