Question

我正在使用引导导航栏并且工作正常，在移动设备上会出现切换按钮，当单击此按钮时，它会显示一个包含正确菜单项的下拉列表，就像引导程序默认值一样。

但我还希望有一个菜单项，其中包含用户启动会话时显示的用户名，当单击此菜单项时，它还会显示一个下拉菜单，其中包含启动会话的用户可用的项目。

启动会话的用户可以使用的菜单项是：

<ul>
  <li>Edit Profile</li>
  <li>Logout</li>
</ul>

您是否知道如何使用引导程序为会话启动的用户创建带有上述项目的下拉菜单？这样当菜单项＆＃34; Jan＆＃34;单击上面的项目使用引导样式显示下拉菜单，就像单击移动设备中的切换按钮时，它会显示带有菜单项的下拉菜单？

工作示例在没有显示可用于会话启动正常工作的用户的下拉菜单项的部分：https://jsfiddle.net/eeeoft8n/3/

Answer 1

请参阅bootstrap docs，其中有一些很好的例子。

您需要在链接上添加div和dropdown-menu类以及必要的aria-toggle以激活它们。

.menu_container {
  position: relative;
  width: 100%;
}

div.dropdown-menu{
  left:auto;
  right:0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>

<div class="container-fluid px-0">
  <nav class="navbar navbar-expand-md navbar-light">
    <a href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="menu_container">
      <div class="collapse navbar-collapse" id="main_nav">
        <ul class="navbar-nav ml-auto d-flex align-items-lg-center">
          <li class="nav-item">
            <a class="nav-link" href="#">Item 0</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Item 1</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="userDropdown"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fa fa-user" aria-hidden="true"></i> Jan
            </a>
            <div class="dropdown-menu" aria-labelledby="userDropdown">
              <a class="dropdown-item" href="#">Edit Profile</a>
              <a class="dropdown-item" href="#">Delete brains</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">logout</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

您可能需要全屏才能获得全角度视图而不是移动视图

如何为已启动会话的用户创建下拉菜单

1 个答案: