565

Bootstrap中,创建一个左侧有 Logo A、中间有菜单项、右侧有 Logo B 的导航栏的最平台友好的方式是什么?

到目前为止,这是我尝试过的,最终对齐,使徽标 A 在左侧,菜单项在左侧徽标旁边,徽标 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>
4

14 回答 14

1097

2021 更新

引导程序 5(测试版)

Bootstrap 5 还有一个 flexbox Navbar,并引入了新的 RTL 支持。因此,“左”和“右”的概念已被“开始”和“结束”所取代。因此,Bootstrap 5 beta 的保证金实用程序发生了变化:

  • ml-auto=>ms-auto
  • mr-auto=>me-auto

另请注意,data-toggle并且data-target也发生了变化:

  • data-toggle=>data-bs-toggle
  • data-target=>data-bs-target

Bootstrap 5 的导航栏演示

引导程序 4

现在 Bootstrap 4 有了 flexbox,导航栏对齐就容易多了。以下是Bootstrap 4 导航栏中中心的更新示例,以及此处演示的许多其他对齐方案

flexbox 、auto-marginsordering实用程序类可用于根据需要对齐导航栏内容有很多事情需要考虑,包括导航栏项目(品牌、链接、切换器)在大屏幕和移动/折叠视图上的顺序和对齐方式。不要将网格类 (row,col) 用于 Navbar

这里有各种各样的例子......

左、中(品牌)和右链接:

在此处输入图像描述

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-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 ml-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>
</nav>

http://codeply.com/go/qhaBrcWp3v


另一个带有中心链接和覆盖徽标图像的 BS4 导航栏选项:

中心链接和覆盖徽标图像

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
        <ul class="navbar-nav ml-auto text-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto my-2 order-0 order-md-1 position-relative">
        <a class="mx-auto" href="#">
            <img src="//placehold.it/120/ccff00" class="rounded-circle">
        </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 dual-collapse2 order-2 order-md-2">
        <ul class="navbar-nav mr-auto text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

或者,这些其他 Bootstrap 4 对齐方案:

品牌左,死点链接,(右空)

导航栏品牌左侧,死点链接


品牌和链接中心,左右图标

在此处输入图像描述


更多 Bootstrap 4 示例

移动设备上的左侧切换器,品牌右侧
中心品牌和移动设备
上的链接右对齐桌面上的链接,移动设备上的中心链接
左侧链接和切换器,中心品牌,搜索右侧


另请参阅:Bootstrap 4 将导航栏项目
向右对齐 Bootstrap 4 导航栏与在移动设备上不折叠的按钮右对齐 Bootstrap 4 导航栏中
的元素居中


引导程序 3

选项 1 - 品牌中心,带有左/右导航链接:

在此处输入图像描述

<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>
  <a class="navbar-brand" href="#">Brand</a>
  <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>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
  </div>
</nav>

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;
}
.navbar-toggle {
    z-index:3;
}

http://bootply.com/98314 (3.x)


选项 2 - 左、中和右导航链接:

在此处输入图像描述

<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>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-center">
        <li><a href="#">Center</a></li>
        <li><a href="#">Center</a></li>
      <li><a href="#">Center</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Right</a></li>
    </ul>
  </div>
</nav>

@media (min-width: 768px) {
  .navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }
}

http://bootply.com/SGYC6BWeBK

选项 3 - 将品牌和链接居中

在此处输入图像描述

.navbar .navbar-header,
.navbar-collapse {
    float:none;
    display:inline-block;
    vertical-align: top;
}

@media (max-width: 768px) {
    .navbar-collapse  {
        display: block;
    }
}

http://codeply.com/go/1lrdvNH9GI

更多示例:

左品牌,中心链接
左切换器,中心品牌

对于 3.x,另请参阅 nav-justified:Bootstrap center navbar


Bootstrap 中的中心
导航栏 Bootstrap 4 将导航栏项目向右对齐

于 2013-12-03T21:27:34.540 回答
88

引导程序 4

我们有很多方法来对齐 navBars 项。

对于左对齐 在此处输入图像描述

类=“导航栏导航mr-auto

对于右对齐 在此处输入图像描述

类=“导航栏导航ml-auto

对于居中对齐 在此处输入图像描述

类=“导航栏-导航mx-auto

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a routerLink="/" class="navbar-brand" href="#">Bootsrap 4</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact us</a>
</li>
</ul>
</nav>
于 2019-01-21T12:50:39.650 回答
36

我需要类似的东西(左、中和右对齐的项目),但能够将居中的项目标记为活动。对我有用的是:

http://www.bootply.com/CSI2KcCoEM

<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>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="navbar-left"><a href="#">Left 1</a></li>
      <li class="navbar-left"><a href="#">Left 2</a></li>
      <li class="active"><a href="#">Center 1</a></li>
      <li><a href="#">Center 2</a></li>
      <li><a href="#">Center 3</a></li>
      <li class="navbar-right"><a href="#">Right 1</a></li>
      <li class="navbar-right"><a href="#">Right 2</a></li>
    </ul>
  </div>
</nav>

CSS:

@media (min-width: 768px) {
  .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar-nav > li {
    float: none;
    display: inline-block;
  }
  .navbar-nav > li.navbar-right {
    float: right !important;
  }
}
于 2014-10-26T15:54:46.047 回答
35

Bootstrap 4(从 alpha 6 开始)

导航栏是用 flexbox 构建的!您将需要 flexbox 和 margin 实用程序,而不是浮动。

对于justify-content-endcollapsediv 上使用右对齐:

<div class="collapse navbar-collapse justify-content-end">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
  </ul>
</div>

此处的完整示例:https ://jsbin.com/kemawa/edit?output

于 2017-01-08T04:29:03.047 回答
11

打我的头,只是重新阅读我的答案,并意识到 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 定位,但我真的不想担心它)。

所以我所做的是利用引导响应实用程序来创建品牌块的多个版本:

<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”一样麻烦,但我觉得在响应式设计的世界里,这个解决方案更适合我的风格。

于 2015-04-02T20:43:05.847 回答
6

在要向右移动的部分上,将左边距设置为 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>

于 2020-05-23T17:16:53.463 回答
5

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

2021 更新

引导 5.0.0 beta-1

添加了 RTL 支持,ml-automr-auto成为ms-autome-auto(左/右开始/结束)。

Bootstrap 5 还要求将导航栏包含在container div.

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

左、中(品牌)和右链接:

在此处输入图像描述

<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>
于 2021-01-19T19:03:44.960 回答
2

在引导程序 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>
于 2021-12-28T13:43:36.047 回答
1

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

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    margin: auto;
    margin-left: 48%;
}
于 2014-05-29T09:24:12.043 回答
1
<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>

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

于 2019-09-08T04:40:58.043 回答
1

这是一个过时的问题,但我找到了一个替代解决方案,可以直接从引导 github 页面共享。文档尚未更新,SO 上还有其他问题要求相同的解决方案,尽管问题略有不同。此解决方案并非特定于您的情况,但您可以看到该解决方案是<div class="container">正确的,<nav class="navbar navbar-default navbar-fixed-top">但也可以根据需要替换<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 中被列为无法修复。

于 2016-02-09T04:12:02.890 回答
0

在 Zim 的回答中,示例 5left 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>
切换到整页并调整浏览器大小以查看导航链接。

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

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

于 2021-12-01T19:14:45.340 回答
-1

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

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

于 2022-02-17T07:13:40.450 回答
-1

最简单的解决方案:

只需将它们划分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>
于 2018-09-02T22:21:11.513 回答