如何在我的导航栏中移动“导航栏品牌"下的“导航"元素 [英] How move 'nav' element under 'navbar-brand' in my Navbar

问题描述

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

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

html:

<a href="#" class="navbar-brand">Academind</a><button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu"><span class="navbar-toggler-icon"></span><div class="collapse navbar-collapse" id="navbarMenu"><ul class="navbar-nav"><li class="nav-item "><a href="#" class="nav-link">用户</a><li class="nav-item"><a href="#" class="nav-link">产品</a><ul class="navbar-nav mr-auto "><li class="nav-item "><a href="#" class="nav-link">登录</a><li class="nav-item"><a href="#" class="nav-link">注销</a>

</nav>

CSS:

@media(最小宽度:768px){.navbar-brand {位置:绝对；左:50%；变换:translateX(-50%);}}

解决方案

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

选项 1:

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

@media(最小宽度:567px){.navbar-品牌{位置:绝对；顶部:5px；左:50%；变换:translateX(-50%);}.导航栏{最小高度: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><div class="collapse navbar-collapse align-self-end" id="navbarMenu"><ul class="navbar-nav"><li class="nav-item"><a href="#" class="nav-link">用户</a><li class="nav-item"><a href="#" class="nav-link">产品</a><ul class="navbar-nav ml-auto"><li class="nav-item "><a href="#" class="nav-link">登录</a><li class="nav-item"><a href="#" class="nav-link">注销</a>

</nav>

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

选项 2:(删除额外的 CSS)

只需将 flex-column 应用到 navbar，然后将品牌和切换器包装在一个 flexbox 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>

<div class="collapse navbar-collapse w-100" id="navbarMenu"><ul class="navbar-nav"><li class="nav-item"><a href="#" class="nav-link">用户</a><li class="nav-item"><a href="#" class="nav-link">产品</a><ul class="navbar-nav ml-auto"><li class="nav-item"><a href="#" class="nav-link">登录</a><li class="nav-item"><a href="#" class="nav-link">注销</a>

</nav>

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

---

相关:如何将品牌和导航栏放在不同的行上?

I using Bootstrap 4 and I set navbar-brand to the center and all elements to the right side. I want to set my nav element below navbar-brand.

Also, I want to set "login" and "log out" to the right side of the nav, but using mr-auto doesn't work.

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%);
  }
}

解决方案

To right align the login, you'd use ml-auto to auto fill the left side, which will push the links to the right.

Option 1:

Then adjust the min-height of the navbar. Use align-items-end to push the links to the bottom, and align the brand on top as desired. This will give the appearance of 2 Navbar rows.

@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

Option 2: (remove extra CSS)

Simply apply flex-column to the navbar, and wrap the brand and toggler together in one flexbox div. Use the auto margin utils to center the brand.

<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

---

Related: How can I have Brand and Navbar on separate lines?

这篇关于如何在我的导航栏中移动“导航栏品牌"下的“导航"元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！