重新放置引导程序4中导航栏的元素

问题描述 投票:0回答:2

我是Bootstrap的新手。

在Bootstrap 4中,我想使用固定顶部的品牌Navbar。导航栏应显示品牌,6个导航项和一个下拉列表:

<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Item1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Item2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Item3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Item4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Item5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Item6</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">dropdown item 1</a>
          <a class="dropdown-item" href="#">dropdown item 2</a>
          <a class="dropdown-item" href="#">dropdown item 3</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

在大视口上,页面将显示在宽度为1200像素的容器中。

我想修改Navbar元素的水平位置,以使6个导航项在1,200px容器中水平居中,brand元素在容器的左端开始,而dropdown元素在容器的右端开始容器:

enter image description here

在较小的视口中,导航栏应遵循其标准行为,即应折叠并显示汉堡包(其中包含6个菜单项以及下拉菜单),品牌元素应在视口的左侧水平开始。

我该如何实现?

编辑:

此代码

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav m-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Item1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item4</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item5</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item6</a>
        </li>
      </ul>
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">
            Dropdown
          </a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">dropdown item 1</a>
            <a class="dropdown-item" href="#">dropdown item 2</a>
            <a class="dropdown-item" href="#">dropdown item 3</a>
          </div>
        </li>
      </ul>
    </div>
    </div>
  </nav>

给出以下结果:enter image description here更改为:

  • <div class="container">之后的<nav...>。这给出了1200像素的容器。
  • 两个<ul class="navbar-nav">而不是一个。这会将6个导航项与下拉菜单分开。
  • 第一个<ul class="navbar-nav">使用m-auto。这会将6个导航项居中,并将下拉列表推到右侧。

但是结果不是应该的。品牌元素应在居中1200px的左端开始,下拉元素应在居中1200px的右端开始:

enter image description here如何解决这个问题?

twitter-bootstrap bootstrap-4 navbar
2个回答
0
投票

在div mx-lg-auto上添加类别.navbar-nav

mx-auto将使元素居中,而lg部分将检查视口宽度是否为1200px或更大。

小提琴:https://jsfiddle.net/oLet2w6k/

Bootstrap doc:https://getbootstrap.com/docs/4.3/utilities/spacing/#horizontal-centering


0
投票

尝试此代码:

<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light justify-content-md-center justify-content-start">
    <a class="navbar-brand mr-0" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
      <ul class="navbar-nav mx-auto text-md-center text-left">
        <li class="nav-item active">
          <a class="nav-link" href="#">Item1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item4</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item5</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item6</a>
        </li>
      </ul>
      <div class="nav-item dropdown flex-row justify-content-md-center justify-content-start flex-nowrap">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">dropdown item 1</a>
          <a class="dropdown-item" href="#">dropdown item 2</a>
          <a class="dropdown-item" href="#">dropdown item 3</a>
        </div>
      </div>
    </div>
  </nav>
© www.soinside.com 2019 - 2024. All rights reserved.