使用Bootstrap创建带有左、中、右对齐项目的导航栏

Question

使用Bootstrap创建带有左、中、右对齐项目的导航栏

616

在 Bootstrap 中，创建一个导航栏，最平台友好的方式是什么？其中Logo A在左侧，菜单项在中心，Logo B在右侧。

目前我尝试了以下方法，但结果是Logo A在左侧，紧随其后菜单项和Logo B在右侧。

<div class="navbar navbar-fixed-top navbar-custom ">
  <div class="container" >
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">Menu Item 1</a></li>
        <li><a href="#contact">Menu Item 2</a></li>
        <li><a href="#about">Menu Item 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
      </ul>
    </div>
  </div>
</div>

- Aliv

这是一个很好的例子。 - undefined

15个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- atreeon · Answer 1

我发现以下方案，根据您左侧、中间和右侧项目的内容会更好。100%的宽度没有边距会导致div重叠，并且会防止锚标签正确工作-这是不需要使用z-index的混乱情况。

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    margin: auto;
    margin-left: 48%;
}

- Nehil Koshiya · Answer 2

<div class="d-flex justify-content-start">hello</div>    
<div class="d-flex justify-content-end">hello</div>
<div class="d-flex justify-content-center">hello</div>
<div class="d-flex justify-content-between">hello</div>
<div class="d-flex justify-content-around">hello</div>

将您想要居中、右对齐或左对齐的字段放置在上述分区之上。

- the Hutt · Answer 3

在Zim的回答中，例5 left and center only with empty space right 并没有真正将导航链接居中。我们可以通过进行一些更改来解决这个问题：

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />

  <p>Zim's original code</p>
  <!-- example 5 left and center only with empty space right -->
  <nav class="navbar navbar-expand-sm navbar-dark bg-primary flex-sm-nowrap flex-wrap">
    <div class="container-fluid">
      <button class="navbar-toggler flex-grow-sm-1 flex-grow-0 me-2" type="button" data-bs-toggle="collapse"
        data-bs-target="#navbar5">
        <span class="navbar-toggler-icon"></span>
      </button>

      <span class="navbar-brand flex-grow-1">Navbar 5</span>

      <div class="navbar-collapse collapse flex-grow-1 justify-content-center" id="navbar5">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Codeply</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
        </ul>
      </div>

      <div class="flex-grow-1">
        <!--spacer-->
      </div>

    </div>
  </nav>
  <div class="centerMarker">mid</div>
  <br><br><br>


  <p>Modified solution</p>
  <!-- example 5 left and center only -->
  <nav class="navbar navbar-expand-sm navbar-dark bg-primary flex-sm-nowrap flex-wrap">
    <!-- 2.5rem is height of the toggler -->
    <div class="container-fluid" style="height:2.5rem">

      <span class="navbar-brand position-absolute">
        <button class="navbar-toggler me-2" type="button" data-bs-toggle="collapse"
          data-bs-target="#navbar5">
          <span class="navbar-toggler-icon"></span>
        </button>
        Navbar 5
      </span>

      <div class="navbar-collapse collapse mx-auto w-100" id="navbar5">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Codeply</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
        </ul>
      </div>

    </div>
  </nav>

  <div class="centerMarker">mid</div>
  <style>
  body {
   font-family: monospace;
   padding: 10px
  }

  .centerMarker {
   margin: 0 auto;
   width: fit-content;
   background-color: wheat;
  }
  </style>

Switch to full page and resize browser to see navlinks.

Bootstrap不允许我们设置flex-basis:0，因此该属性保持为auto，间隔符号不会平均扩展。因此，导航链接未居中。

我们可以在品牌容器上使用position-absolute类，在导航链接上使用mx-auto w-100类。切换器将导航栏的最小高度设置为2.5rem。我们必须将其设置为流体div容器。

- parsecer · Answer 4

最简单的解决方案：

只需将 navbar 分成列：例如，如果总共有 24 列，其中 12 列将为空，另外 12 列将包含导航栏：

<nav class="navbar navbar-default">
    <div class="row">
       <div class="col-sm-4"></div>
       <div class="col-sm-4"></div>
       <div class="col-sm-4"></div>

       <div class="col-sm-12">
           <ul class="nav navbar-nav" align="center">
              <li><a href="#">Home</a></li>
              <li><a href="#">First Link</a></li>
              <li><a href="#">Second Link</a></li>
              <li><a href="#">Third Link</a></li>
              <li><a href="#">Fourth Link</a></li>
           </ul>
       </div>
    </div>
</nav>

- Kishor · Answer 5

I use a boostrap@5.3.2 in angular
I Achieve this Bootstrap NavBar with left, center or right aligned items