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

Bertha 。 2022-11-26 07:59 200阅读 0赞

本文翻译自：[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.* **但是我尝试的所有方法似乎都无法正常工作。**

[![导航栏的图片][G2o6H.png]][G2o6H.png]

## *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-将导航栏项目向右对齐][https_stackoom.com_question_2ObxZ_Bootstrap-]

--------------------

### \#2楼 ###

***Bootstrap 4** has [many different ways to align navbar items][] .* **Bootstrap 4有[*许多*不同的方法来对齐导航栏项目][many different ways to align navbar items] 。** *`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]* **[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`将使它们之间的空间均匀，**

--------------------

***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][http_www.codeply.com_go_P0G393rzfm]* **更新了[适用于Bootstrap 4的导航栏][http_www.codeply.com_go_P0G393rzfm]**

--------------------

*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][]* **[右对齐按钮始终可见][Right align button that is always visible]**

[![在此处输入图片说明][IGYng.png]][IGYng.png]

[![在此处输入图片说明][gMlCH.png]][gMlCH.png]

--------------------

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

--------------------

### \#3楼 ###

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

*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][] .* **这是一个[工作示例][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` ：**

--------------------

### \#6楼 ###

*Just add mr-auto class at ul* **只需在ul添加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>

[Bootstrap 4 align navbar items to the right]: https://oldbug.net/q/2ObxZ/Bootstrap-4-align-navbar-items-to-the-right
[G2o6H.png]: https://i.stack.imgur.com/G2o6H.png
[https_stackoom.com_question_2ObxZ_Bootstrap-]: https://stackoom.com/question/2ObxZ/Bootstrap-%E5%B0%86%E5%AF%BC%E8%88%AA%E6%A0%8F%E9%A1%B9%E7%9B%AE%E5%90%91%E5%8F%B3%E5%AF%B9%E9%BD%90
[many different ways to align navbar items]: https://stackoverflow.com/questions/19733447/bootstrap-navbar-with-left-center-or-right-aligned-items
[http_www.codeply.com_go_P0G393rzfm]: http://www.codeply.com/go/P0G393rzfm
[Right align button that is always visible]: https://www.codeply.com/go/ljI9F6aRLk
[IGYng.png]: https://i.stack.imgur.com/IGYng.png
[gMlCH.png]: https://i.stack.imgur.com/gMlCH.png
[Bootstrap NavBar with left_ center or right aligned items]: https://stackoverflow.com/questions/19733447/bootstrap-navbar-with-left-center-or-right-aligned-items/20362024#20362024
[working example]: http://codepen.io/craigvantonder/pen/MJwLWb