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

时间:2016-04-27 15:19:02

标签: html5 twitter-bootstrap css3 twitter-bootstrap-4 bootstrap-4

根据http://htmlhelp.com/reference/html40/block.html li是一个块元素,如果我使用li标签,菜单会在Bootstrap 4中的小设备上保持水平切换。我的问题是li tag是一个块元素,那么结果应该是下面代码的垂直菜单而不是水平?

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

1 个答案:

答案 0 :(得分: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;
  }
}