html - 如何在我的导航栏中将 'nav' 元素移动到 'navbar-brand' 下

标签 html css flexbox bootstrap-4 navbar

我使用 Bootstrap 4 并将 navbar-brand 设置为中心,将所有元素设置为右侧。我想在 navbar-brand 下方设置我的 nav 元素。 enter image description here

此外,我想将“登录”和“注销”设置到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%);
  }
}

最佳答案

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

enter image description here

选项 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,并将品牌和切换器包装在一个 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>
        </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?

关于html - 如何在我的导航栏中将 'nav' 元素移动到 'navbar-brand' 下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55077119/

相关文章:

html - 制作此布局(CSS 或表格)的最佳方式是什么?

css - Twitter Bootstrap 导航单个菜单项颜色

css - html, body {高度 : 100%} is always displaying scrollbar

html - 当 flex-wrap 使用纯 CSS 包裹元素时移除 margin-right

html - 将滚动条添加到嵌套容器

html - 让 flexbox 为侧边菜单填充浏览器的垂直空间

html - 将变量添加到一组数组

html - 如何阻止固定对象超出其父容器?

javascript - jQuery:选择样式属性?

html - 限制 flexbox 元素的高度