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

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

这是BS5的更新，并建议编辑@Zim的答案。不幸的是，由于编辑队列已满，我无法提交编辑。如果在队列允许新的编辑时，有高声誉的用户可以提交编辑，那就太好了。

2021年更新

引导5.0.0 beta-1

随着rtl支持的增加，ml-auto和mr-auto变成了ms-auto和me-auto(左/右开始/结束)。

引导5还要求导航栏包含在容器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>

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

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

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

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