javascript - mdBootstrap:导航栏在展开或移动模式下将 Angular 链接保持在顶部

Question

我在我的响应式网站上使用 Material Design Bootstrap。

在我顶部导航栏的大屏幕上，我有:

1. 我的品牌链接左对齐
2. 两个页面链接
3. 个人资料下拉菜单右对齐

大屏幕外观:

意图是当我将屏幕调整为小设备时，我将:

1. 用于展开左对齐菜单的切换器
2. 我的品牌链接在中间对齐
3. 个人资料下拉菜单右对齐

当点击切换器时，带有两个页面链接的菜单将展开，但顶部导航栏保持不变(切换器、我的品牌、个人资料)。

展开后在小屏幕上的期望外观:

发生的事情是，当点击切换器时，我的品牌链接会在导航栏中正确对齐，并且配置文件下拉列表会显示在展开菜单的末尾。

当前行为(错误):

这是 mdbootstrap.com 片段编辑器中的实时代码: https://mdbootstrap.com/snippets/jquery/temp/966115

<nav class="navbar navbar-expand-sm navbar-dark indigo">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-top">
  <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand font-weight-bolder" href="#">My Brand</a>
  <div class="collapse navbar-collapse" id="navbar-top">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
  <div>
    <ul class="navbar-nav mr-1 mt-lg-1">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle waves-effect waves-light" id="profile-dropdown"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fas fa-user"></i>
        <span>Profile</span>
        </a>
        <div class="dropdown-menu dropdown-menu-right dropdown-info" aria-labelledby="profile-dropdown">
          <a class="dropdown-item waves-effect waves-light text-nowrap" href="/account">
          <i class="fas fa-user-cog navbar-profile-icon"></i>
          <span>My account</span>
          </a>
          <a class="dropdown-item waves-effect waves-light text-nowrap" href="/logout">
          <i class="fas fa-sign-out-alt navbar-profile-icon"></i>
          <span>Logout</span>
          </a>
        </div>
      </li>
    </ul>
  </div>
</nav>

感谢帮助，谢谢!

Answer 1

您必须使用 position:absolute 将 navbar-brand 置于 576px 断点的中心；在同一个断点处，您还必须将下拉菜单也 float 到屏幕右侧

更新:根据提问者的评论，更新了下面片段中的代码...问题中的 mdbootstrap 片段已死!!

@media screen and (max-width:768px) {
  .fixedNavBarItem {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .navbar-brand {
    position: absolute;
    width: 67%;
    text-align: center;
    margin-left: 15%;
    top: 6px;
  }
}

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.7/css/mdb.min.css" rel="stylesheet">

<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.7/js/mdb.min.js"></script>

<!--Navbar -->
<nav class="mb-1 navbar navbar-expand-md navbar-dark default-color">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-333" aria-controls="navbarSupportedContent-333" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent-333">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home
            <span class="sr-only">(current)</span>
          </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-333" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown
          </a>
        <div class="dropdown-menu dropdown-default" aria-labelledby="navbarDropdownMenuLink-333">
          <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>

  </div>
  <ul class="navbar-nav ml-auto nav-flex-icons fixedNavBarItem">
    <!--

  <li class="nav-item">
    <a class="nav-link waves-effect waves-light">
      <i class="fab fa-twitter"></i>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link waves-effect waves-light">
      <i class="fab fa-google-plus-g"></i>
    </a>
  </li>
-->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-333" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fas fa-user"></i>
      </a>
      <div class="dropdown-menu dropdown-menu-right dropdown-default" aria-labelledby="navbarDropdownMenuLink-333">
        <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>