带有左、中或右对齐项目的引导导航栏

打我的头，只是重新阅读我的答案，并意识到 OP 要求左侧有两个徽标，右侧有一个中心菜单，而不是相反。

这可以通过使用 Bootstrap 的“navbar-right”和“navbar-left”来严格在 HTML 中完成，然后为您的 UL 使用“nav-justified”而不是“navbar-nav”。不需要额外的 CSS（除非您想将 navbar-collapse 切换开关放在 xs 视口的中心，然后您需要覆盖一点，但由您决定）。

<nav class="navbar navbar-default" role="navigation">
  <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>
    <div class="navbar-brand navbar-left"><a href="#"><img src="http://placehold.it/150x30"></a></div>

  </div>
  <div class="navbar-brand navbar-right"><a href="#"><img src="http://placehold.it/150x30"></a></div>

  <div class="navbar-collapse collapse">
    <ul class="nav nav-justified">
        <li><a href="#">home</a></li>
        <li><a href="#about">about</a></li>
    </ul>
  </div>
</nav>

引导层：http://www.bootply.com/W6uB8YfKxm

对于那些试图以“品牌”为中心的人来说，这是我的旧答案：

我知道这个线程有点旧，但只是在处理这个问题时发布我的发现。我决定将我的解决方案基于 skelly 的回答，因为 tomaszbak 在 collaspe 上休息。首先，我创建了我的“导航栏中心”，并在我的 CSS 中为普通导航栏关闭了浮动：

.navbar-center
{
   position: absolute;
   width: 100%;
   left: 0;
   text-align: center;
   margin: auto;
}

.navbar-brand{
   float:none;
}

然而，skelly 的答案的问题是，如果您的品牌名称很长（或者您想为您的品牌使用图像），那么一旦您进入 sm 视口，由于绝对位置和评论者的情况，可能会出现重叠说过，一旦你到达 xs 视口，切换开关就会中断（除非你使用 Z 定位，但我真的不想担心它）。

所以我所做的是利用引导程序 responsive utilities 创建多个版本的品牌块：

<nav class="navbar navbar-default" role="navigation">
<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>
  <div class="navbar-brand visible-xs"><a href="#">Brand That is Really Long</a></div>
</div>
<div class="navbar-brand visible-sm text-center"><a href="#">Brand That is Really Long</a></div>
<div class="navbar-brand navbar-center hidden-xs hidden-sm"><a href="#">Brand That is Really Long</a></div>

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-left">
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
  </ul>
</div>

因此，现在 lg 和 md 视口的品牌以左右链接为中心，一旦您到达 sm 视口，您的链接就会下降到下一行，这样您就不会与您的品牌重叠，然后最后在 xs视口 Collaspe 启动，您可以使用切换。您可以更进一步，在与 navbar-brand 一起使用时修改 navbar-right 和 navbar-left 的媒体查询，以便在 sm 视口中链接全部居中但没有时间审查它。

你可以在这里查看我的旧靴子：www.bootply.com/n3PXXropP3

我想拥有 3 个品牌可能和“z”一样麻烦，但我觉得在响应式设计的世界里，这个解决方案更适合我的风格。

这是 BS5 的更新和@Zim 答案的建议编辑。不幸的是，由于编辑队列已满，我无法提交编辑。如果队列允许新编辑后，具有高声誉的用户可以提交编辑，那将是一件好事。

2021 更新

引导 5.0.0 beta-1

添加 RTL 支持后，ml-auto 和 mr-auto 变为 ms-auto 和 me-auto（左/右开始/结束）。

Bootstrap 5 还要求导航栏包含在 container div 中。

此代码生成与第一个 Bootstrap 4 示例等效的代码：

左、中（品牌）和右链接：

https://i.stack.imgur.com/bYbLJ.png

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <div class="container-fluid">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
      <ul class="navbar-nav me-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Left</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="//codeply.com">Codeply</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
    <div class="mx-auto order-0">
      <a class="navbar-brand mx-auto" href="#">Navbar 2</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Right</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

在要向右移动的部分上，将左边距设置为 auto -> ml-auto。

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  <div class="navbar-nav ml-auto"> !<--MARGIN LEFT AUTO HERE !-->
    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
    <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </div>
</div>

在引导程序 5 ms-auto 中，我将导航项向右移动

引导程序的代码是：

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

我将 ul 标记 <ul class="navbar-nav"> 更改为 <ul class="navbar-nav ms-auto mb-2 mb-lg-0">，对我来说效果很好

我编辑后的代码是：

 <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container-fluid">
      <a class="navbar-brand nav-title" href="#">Cooking Master</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

在 bootstrap 5 中，类发生了变化，因此对于 ml-auto 是使用 ms-auto 进行的更改，而 mr-auto 是使用 me-auto 进行的更改

对于left，我们必须使用s而不是l，对于Right，我们必须使用e而不是r

我发现以下是更好的解决方案，具体取决于您的左侧、中间和右侧项目的内容。没有边距的 100% 宽度会导致 div 重叠并阻止锚标记正常工作 - 即没有乱用 z-indexes。

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

这是一个过时的问题，但我找到了一个替代解决方案，可以直接从引导 github 页面共享。文档尚未更新，SO 上还有其他问题要求相同的解决方案，尽管问题略有不同。此解决方案并非特定于您的情况，但正如您所见，解决方案是 <nav class="navbar navbar-default navbar-fixed-top"> 之后的 <div class="container">，但也可以根据需要替换为 <div class="container-fluid"。

<!DOCTYPE html>
<html>

<head>
  <title>Navbar right padding broken </title>
  <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#/" class="navbar-brand">Hello</a>
      </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">

        <ul class="nav navbar-nav navbar-right">
          <li>
            <div class="btn-group navbar-btn" role="group" aria-label="...">
              <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalLogin">Se connecter</button>
              <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalSignin">Créer un compte</button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

在此页面上的小提琴中找到了解决方案：https://github.com/twbs/bootstrap/issues/18362

并且在 V3 中被列为无法修复。

<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>

根据上面的划分，将要居中、居中或居中的字段放在左或右。

在 Zim 的回答中，示例 5 left and center only with empty space right 并没有真正使导航链接居中。我们可以通过一些更改来修复它：

Zim的原代码

米修改后的解决方案

Bootstrap 不允许我们设置 flex-basis:0，因此属性仍然是 auto，并且分隔符不会均匀扩展。所以导航链接没有居中。

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

最简单的解决方案：

只需将 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>