如何在我的导航栏中移动“导航栏品牌”下的“导航”元素

Posted 2023-03-05

【中文标题】如何在我的导航栏中移动“导航栏品牌”下的“导航”元素

【英文标题】：How move 'nav' element under 'navbar-brand' in my Navbar

【发布时间】：2019-07-31 07:21:55

【问题描述】：

我使用 Bootstrap 4 并将 navbar-brand 设置为中心，将所有元素设置为右侧。我想将我的nav 元素设置在navbar-brand 之下。

另外，我想在nav的右侧设置“登录”和“注销”，但是使用mr-auto不起作用。

html:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <a href="#" class="navbar-brand">Academind</a>
  <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
          <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse" id="navbarMenu">
    <ul class="navbar-nav  ">
      <li class="nav-item ">
        <a href="#" class="nav-link">Users</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Products</a>
      </li>
    </ul>
    <ul class="navbar-nav  mr-auto ">
      <li class="nav-item ">
        <a href="#" class="nav-link">Login</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Log out</a>
      </li>
    </ul>
  </div>
</nav>

css:

@media (min-width: 768px) 
  .navbar-brand 
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  

【参考方案1】：

要右对齐登录，您可以使用ml-auto 自动填充left 侧，这会将链接推送到right。

选项 1：

然后调整导航栏的min-height。使用align-items-end 将链接推到底部，并根据需要在顶部对齐品牌。这将显示 2 个导航栏行。

@media (min-width: 567px) 
    .navbar-brand
    
        position: absolute;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
    
    .navbar 
        min-height: 90px;
    
  

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <a href="#" class="navbar-brand">Academind</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse align-self-end" id="navbarMenu">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a href="#" class="nav-link">Users</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Products</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item ">
                <a href="#" class="nav-link">Login</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Log out</a>
            </li>
        </ul>
    </div>
</nav>

https://www.codeply.com/go/07ibCvkQJi

选项 2：（删除多余的 CSS）

只需将flex-column 应用到navbar，并将品牌和切换器一起包装在一个弹性盒 div 中。使用自动边距工具使品牌居中。

<nav class="navbar navbar-expand-sm navbar-dark bg-dark flex-column align-items-stretch">
    <div class="d-flex">
        <a href="#" class="navbar-brand mx-sm-auto mr-auto">Academind</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse w-100" id="navbarMenu">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a href="#" class="nav-link">Users</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Products</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a href="#" class="nav-link">Login</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Logout</a>
            </li>
        </ul>
    </div>
</nav>

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

---

相关： How can I have Brand and Navbar on separate lines?

【参考方案2】：

您可以使用 bootstrap4 类 d-flex，无需任何额外的 CSS：

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <div class="w-100 d-flex flex-column">

    <div class="w-100 d-flex justify-content-center align-items-center">
        <a href="#" class="navbar-brand">Academind</a>
        <button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navbarMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>

    <div class="collapse navbar-collapse" id="navbarMenu">

        <ul class="navbar-nav mr-auto">
            <li class="nav-item ">
                <a href="#" class="nav-link">Users</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Products</a>
            </li>
        </ul>

        <ul class="navbar-nav  ml-auto">
            <li class="nav-item ">
                <a href="#" class="nav-link">Login</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Logout</a>
            </li>
        </ul>

    </div>
</div></nav>

演示：https://jsfiddle.net/PouyaAk/1m2pLn9j/18/

【讨论】：

这个问题是下拉的动画被破坏了

修复动画的黑客方法是复制此代码的第一行“