bootstrap 4 导航栏简单布局答案

【问题标题】：bootstrap 4 navbar simple layoutbootstrap 4 导航栏简单布局
【发布时间】：2018-01-10 01:46:15
【问题描述】：

我正在尝试为引导导航栏进行简单的布局设计。 1 - 我需要左侧的切换按钮来切换侧边栏 2 - 中心的标志 3 - 右侧用于切换下拉菜单的按钮

这是我的 html 代码：

<nav class="navbar navbar-toggleable-xs navbar-light fixed-top">
    <a class="navbar-toggler navbar-toggler-left mdl-button mdl-button--icon" href="#" data-toggle="collapse" data-target="#sidebar" aria-expanded="false" aria-label="Toggle navigation">
        <i class="material-icons">menu</i>
    </a>
        <a class="navbar-brand d-flex mx-auto" href="#">Logo</a>        
        <span class="navbar-toggler-right mdl-button mdl-button--icon dropdown-toggler" type="button" data-toggle="collapse" data-target=".dropdown" aria-expanded="false"><i class="material-icons">more_vert</i>
        </span>
            <ul class="navbar-nav">
            <li class="nav-item">
        <div class=" dropdown dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <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>
      </li>
    </ul>
</nav>
<div class="collapse" id="sidebar"></div>

这是css：

#sidebar{
position: absolute;
top: 50px;
left: 0px;
width: 200px;
height: 99%;
background-color: #333;
z-index: 10;
overflow: hidden;
}

有人可以帮忙吗？提前致谢

【问题讨论】：

标签： navbar bootstrap-4

【解决方案1】：

您不想使用navbar-toggler，除非您使用的是看起来不需要的navbar-collapse。

试试这样的..

https://www.codeply.com/go/GpVvCkOp4z

<nav class="navbar navbar-toggleable-xl navbar-light bg-faded">
    <div class="d-flex">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" data-toggle="collapse" data-target="#sidebar" href="#sidebar"><i class="material-icons">menu</i></a>
            </li>
        </ul>
    </div>
    <a class="navbar-brand d-flex mx-auto" href="#">Logo</a>
    <div class="dropdown">
        <a class="nav-link" data-toggle="dropdown"><i class="material-icons">more_vert</i></a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
            <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>
    </div>
</nav>

【讨论】：