引导4

我们有很多方法来对齐导航栏项目。

左对齐

Class = "navbar-nav mr-auto"

右对齐

Class = "navbar-nav ml-auto"

对于中心对齐

Class = "navbar-nav mx-auto"

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <a routerLink="/" class="navbar-brand" href="#">Bootstrap 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>

2021年更新

引导5 (beta)

Bootstrap 5也有一个灵活的导航栏，并引入了新的RTL支持。因此，“左”和“右”的概念已被“开始”和“结束”所取代。因此，引导5 beta的边际效用发生了变化:

Ml-auto => ms-auto Mr-auto => me-auto

还要注意数据切换和数据目标也发生了变化:

data-b -toggle => data-b -toggle Data-target => data-bs-target

导航条演示引导5

引导4

现在Bootstrap 4有了flexbox，导航条对齐就容易多了。以下是Bootstrap 4导航栏中左、右、中对齐的更新示例，以及这里演示的许多其他对齐场景。

flexbox、auto-margin和ordered实用工具类可以根据需要对导航栏内容进行对齐。有很多事情需要考虑，包括大屏幕和移动/折叠视图中导航栏项目(品牌、链接、切换器)的顺序和对齐。不要在导航栏中使用网格类(row,col)。

这里有各种各样的例子…

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

<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个例子:

手机上的善变者左，品牌右 手机上的品牌和链接中心 桌面上的链接右对齐，移动端链接居中 左链接&切换器，中心品牌，搜索右边

---

另请参阅:引导4对准导航栏项向右 引导4导航栏右对齐的按钮，不崩溃的移动 在引导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也参见导航栏-justified:引导中心导航栏

---

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

我发现以下是一个更好的解决方案，取决于你的左，中，右项目的内容。宽度为100%而没有边距会导致div重叠，并且会阻止锚标记正确工作——这是在没有混乱使用z索引的情况下。

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

引导4(截至alpha 6)

导航条是用flexbox构建的!你需要的不是浮动，而是flexbox和保证金效用。

对于右对齐，在折叠div上使用justify-content-end:

<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

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

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

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

把你想要的字段按照上面的划分放在中间、右边或左边。