Logo vertikal mit Schaltfläche in Bootstrap 4 ausrichten navbar

Question

Wie kann ich in Bootstrap 4 erstellen, so dass die Schaltfläche in der mobilen Ansicht schön vertikal ausgerichtet ist? Logo sollte auf der linken Seite sein, Button auf der rechten Seite. Minimales Markup verwenden. Muss ich sogar order: 2 auf die Schaltfläche setzen, um sie nach rechts auszurichten? Auch align-items: content funktioniert aus irgendeinem Grund nicht zum vertikalen Ausrichten.

http://codepen.io/anon/pen/egypoe

<nav class="navbar navbar-inverse navbar-toggleable-md navbar-affix py-4"> 

    <div class="container"> 
    <div class="d-flex justify-content-between hidden-lg-up"> 

     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler2" aria-controls="navbarToggler2" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
     </button> 

     <a class="navbar-brand" href="#"> 
     <img class="logo img-fluid" src="http://placehold.it/350x150"> 
     </a> 
    </div> 

    <div class="collapse navbar-collapse" id="navbarToggler2"> 

     <ul class="navbar-nav ml-auto mt-2 mt-md-0"> 
     <li class="menu-item">Link 1</li> 
     <li class="menu-item">Link 2</li> 
     <li class="menu-item">Link 3</li> 
     </ul> 
    </div> 

    </div> 
</nav> 

body { 
    background-color: #333; 
} 

.logo { 
    max-width: 183px; 
} 

@media screen and (max-width: 480px) { 
    .navbar-toggler { 
    order: 2; 
    border: 0; 
    } 
    .d-flex { 
    align-items: center; 
    } 
} 

ul li { 
    color: #fff; 
} 

Answer 1

Der Grund align items: content ist nicht für die vertikale Zentrierung arbeiten ist, weil die Schaltfläche, um eine align-self Eigenschaft hat, dass es zwingende wird. Sie können dies beheben, indem Sie align-self: auto oder sogar align-self: center zu der Schaltfläche hinzufügen.

Sie benötigen order: 2 auf der Schaltfläche, um die Reihenfolge im DOM zu ändern. Ich meine, es gibt andere Möglichkeiten, dies mit Positionierung und Schwimmern zu tun, aber dies ist am einfachsten für Flex-Layouts.