Bootstrap 4 li-Tags nicht als Blockelement Ausrichten

Question

Nach http://htmlhelp.com/reference/html40/block.htmlli ist ein Blockelement, wenn ich li Tags das Menü auf Toggle auf kleines Gerät in Bootstrap horizontal verwenden bleibt 4. Meine Frage ist, ob li Tag ein Blockelement ist dann der Ergebnis sollte ein vertikales Menü für den folgenden Code anstelle von horizontal sein?

<ul class="nav navbar-nav"> 
    <li class="nav-item active"> 
     <a class="nav-link" href="#">Home</a> 
    </li> 

    <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> 
     <div class="dropdown-menu"> 
      <a class="dropdown-item" href="#">Action</a> 
      <a class="dropdown-item" href="#">Another action</a> 
      <a class="dropdown-item" href="#">Something else here</a> 
      <div class="dropdown-divider"></div> 
      <a class="dropdown-item" href="#">Separated link</a> 
     </div> 
    </li> 
    <li class="nav-item active"> 
     <a class="nav-link" href="#">Another Menu</a> 
    </li> 
<ul> 

Answer 1

Derzeit Bootstrap 4 ist in der Alpha-Phase, was bedeutet, dass die SCSS/CSS für die navbar noch nicht bereit ist.

Sie sollten den SCSS-Code hinzufügen, um die float:left für kleinere Bildschirme selbst rückgängig zu machen.

Sie können den folgenden SCSS Code verwenden:

.navbar { 

    @include media-breakpoint-down(sm) { 
    .navbar-brand, 
    .nav-item { 
     float: none; 
    } 
    } 
} 

Der vorstehende SCSS in CSS kompiliert wie folgt:

@media (max-width: 767px) { 
    .navbar .navbar-brand, 
    .navbar .nav-item { 
    float: none; 
    } 
}