Bootstrap 4 Li標簽未作為塊元素對齊

Question

根據http://htmlhelp.com/reference/html40/block.html，如果我使用li標簽， 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處於Alpha階段，這意味着導航欄的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;
  }
}