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

本文翻译自：Bootstrap 4 align navbar items to the right

How do I align a navbar item to right? 如何将导航栏项目右对齐？

I want to have the login and register to the right. 我要登录并在右边注册。 But everything I try does not seem to work. 但是我尝试的所有方法似乎都无法正常工作。

This is what I have tried so far: 到目前为止，这是我尝试过的：

• <div> around the <ul> with the atribute: style="float: right" <div>周围， <ul>带有属性： style="float: right"
• <div> around the <ul> with the atribute: style="text-align: right" <div>在<ul> <div>周围，​​带有属性： style="text-align: right"
• tried those two things on the <li> tags 在<li>标记上尝试了这两件事
• tried all those things again with !important added to the end 再次尝试所有这些事情，最后添加!important
• changed nav-item to nav-right in the <li> 在<li> nav-right nav-item更改为nav-right
• added a pull-sm-right class to the <li> 在<li>添加了pull-sm-right类
• added a align-content-end class to the <li> 在<li>添加了align-content-end类

This is my code: 这是我的代码：

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>

---

#1楼

参考：https://stackoom.com/question/2ObxZ/Bootstrap-将导航栏项目向右对齐

---

#2楼

Bootstrap 4 has many different ways to align navbar items . Bootstrap 4有许多不同的方法来对齐导航栏项目 。 float-right won't work because the navbar is now flexbox . float-right不起作用，因为导航栏现在为flexbox 。

You can use the new mr-auto for auto right margin on the 1st (left) navbar-nav . 您可以将新的mr-auto用作第一个 （左侧） navbar-nav自动右页边距。 Alternatively , ml-auto could be used on the 2nd (right) navbar-nav , or if you just have a single navbar-nav . 或者 ，可以在第二个 （右侧） navbar-nav上使用ml-auto ，或者如果您只有一个navbar-nav 。

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
</div>

http://www.codeply.com/go/P0G393rzfm http://www.codeply.com/go/P0G393rzfm

There are also flexbox utils. 还有一些flexbox工具。 In this case, you have 2 navbar-nav s, so justify-content-between in navbar-collapse would work the even the space between them, 在这种情况下，您有2个navbar-nav ，因此navbar-collapse justify-content-between将使它们之间的空间均匀，

 <div class="navbar-collapse collapse justify-content-between">
     <ul class="navbar-nav mr-auto">
               ..
     </ul>
     <ul class="navbar-nav">
           ..
     </ul>
 </div>

---

Update for Bootstrap 4.0 and newer Bootstrap 4.0及更高版本的更新

As of Bootstrap 4 beta, ml-auto will still work to push items to the right. 从Bootstrap 4 beta开始， ml-auto仍然可以将项目推到右侧。 Just be aware the the navbar-toggleable- classes have changed to navbar-expand-* 请注意， navbar-toggleable-类已更改为navbar-expand-*

Updated navbar right for Bootstrap 4 更新了适用于Bootstrap 4的导航栏

---

Another frequent Bootstrap 4 Navbar right alignment scenario includes a button on the right that remains outside the mobile collapse nav so that it is always shown at all widths. 另一个常见的Bootstrap 4导航栏右对齐方案包括在右侧的按钮，该按钮保持在移动折叠导航外部 ，因此始终以所有宽度显示。

Right align button that is always visible 右对齐按钮始终可见

---

Related: Bootstrap NavBar with left, center or right aligned items 相关： 具有左，中或右对齐项的Bootstrap NavBar

---

#3楼

In my case, I wanted just one set of navigation buttons / options and found that this will work: 就我而言，我只需要一组导航按钮/选项，并发现这可以工作：

<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Sign Out</a>
    </li>
  </ul>
</div>

So, you will add justify-content-end to the div and omit mr-auto on the list. 因此，您将在justify-content-end添加justify-content-end并在列表上省略mr-auto 。

Here is a working example . 这是一个工作示例 。

---

#4楼

I'm new to stack overflow and new to front end development. 我是堆栈溢出的新手，也是前端开发的新手。 This is what worked for me. 这对我有用。 So I did not want list items to be displayed. 所以我不想显示列表项。

 .hidden { display:none; } #loginButton{ margin-right:2px; } 

 <nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">NavBar</a> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active hidden"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item hidden"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item hidden"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="loginButton"><a href="#">Log In</a></button> <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><a href="#">Register</a></button> </form> </div> </nav> 

---

#5楼

If you want Home, Features and Pricing on left immediately after your nav-brand , and then login and register on right then wrap the two lists in <div> and use .justify-content-between : 如果您想要在nav-brand之后紧随其后的是Home，Features和Pricing，然后在右侧登录并注册，然后将两个列表包装在<div>并使用.justify-content-between ：

<div class="collapse navbar-collapse justify-content-between">
<ul>....</ul>
<ul>...</ul>
</div>

---

#6楼

Just add mr-auto class at ul 只需在ul添加mr-auto类

<ul class="nav navbar-nav mr-auto">

If you have menu list in both side you can do something like this: 如果两侧都有菜单列表，则可以执行以下操作：

<ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">left 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">left 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">left disable</a>
            </li>
        </ul>