Bootstrap 4 li 标签未对齐为块元素答案

【问题标题】：Bootstrap 4 li tags not aligning as block elementsBootstrap 4 li 标签未对齐为块元素
【发布时间】：2016-08-22 00:01:59
【问题描述】：

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

【问题讨论】：

桌面是水平的，手机是垂直的。 jsfiddle.net/c259LrpL/3
我正在为桌面和移动设备设置水平。

标签： html twitter-bootstrap css twitter-bootstrap-4 bootstrap-4

【解决方案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;
  }
}

【讨论】：