Bootstrap 4 теги Ли не совместив в качестве элементов блока

Question

По http://htmlhelp.com/reference/html40/block.htmlli является блочный элемент, если я использую li теги меню остается в горизонтальном положении на тумблер на небольшом устройстве в Bootstrap 4. Мой вопрос, если li тег блоковый элемент, то результатом должно быть вертикальное меню для кода ниже вместо горизонтального?

<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

В настоящее время Bootstrap 4 находится в альфа-стадии, что означает, что SCSS/CSS для навигационной панели еще не готов.

Вы должны добавить код SCSS, чтобы отменить float:left для небольших экранов самостоятельно.

Вы можете использовать следующий код: SCSS

.navbar { 

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

Предыдущий SCSS компилирует в CSS следующим образом:

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