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

Question

提问by Luuk Wuijster

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>around the <ul>with the atribute: style="text-align: right"
tried those two things on the <li>tags
tried all those things again with !importantadded to the end
changed nav-itemto nav-rightin the <li>
added a pull-sm-rightclass to the <li>
added a align-content-endclass to the <li>

<div>周围<ul>有属性：style="float: right"
<div>周围<ul>有属性：style="text-align: right"
在<li>标签上尝试了这两件事
再次尝试所有这些事情并!important添加到最后
改变nav-item以nav-right在<li>
添加了一个pull-sm-right类<li>
添加了一个align-content-end类<li>

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>

Answer 1

回答by Zim

Bootstrap 4has manydifferent ways to align navbar items. float-rightwon't work because the navbar is now flexbox.

Bootstrap 4有许多不同的方法来对齐导航栏项目。float-right将无法工作，因为导航栏现在是flexbox.

You can use mr-autofor auto right margin on the 1st(left) navbar-nav. Alternatively, ml-autocould be used on the 2nd(right) navbar-nav, or if you just have a single navbar-nav.

您可以mr-auto在第一个（左）上使用自动右边距navbar-nav。或者，ml-auto可以在第二个（右）使用navbar-nav，或者如果您只有一个navbar-nav.

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <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="#">Pricing</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>
    </div>
</nav>

https://codeply.com/go/P0G393rzfm

There are also flexbox utils. In this case, you have 2 navbar-navs, so justify-content-betweenin navbar-collapsewould work the even the space between them,

还有 flexbox 实用程序。在这种情况下，你有2个navbar-navS，所以justify-content-between在navbar-collapse将工作两者之间的连空间，

 <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 newerBootstrap 4.0 及更新版本的更新

As of Bootstrap 4 beta, ml-autowill still work to push items to the right. Just be aware the the navbar-toggleable-classes have changed to navbar-expand-*

从 Bootstrap 4 beta 开始，ml-auto仍然可以将项目向右推送。请注意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 collapsenav 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

Answer 2

回答by Craig van Tonder

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-endto the div and omit mr-autoon the list.

因此，您将添加justify-content-end到 div 并mr-auto在列表中省略。

Here is a working example.

这是一个工作示例。

Answer 3

回答by Muhammad Tarique

For those who is still struggling with this issue in BS4 simply try below code -

对于那些仍在 BS4 中遇到此问题的人，只需尝试以下代码 -

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

Answer 4

回答by geet Sebastian

On Bootstrap 4

在 Bootstrap 4

If you want to align brand to your left and all the navbar-items to right, change the default mr-autoto ml-auto

如果您想将品牌与您的左侧对齐并将所有导航栏项目向右对齐，请将默认值更改mr-auto为ml-auto

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

Answer 5

回答by ClemC

On Bootsrap 4.0.0-beta.2, none of the answers listed here worked for me. Finally, the Bootstrap site gave me the solution, not via its doc but via its page source code...

在上Bootsrap 4.0.0-beta.2，此处列出的所有答案都不适合我。最后，Bootstrap 网站给了我解决方案，不是通过它的文档，而是通过它的页面源代码......

Getbootstrap.com align their right navbar-navto the right with the help of the following class: ml-md-auto.

Getbootstrap.com调整其权navbar-nav与下面的类的帮助的权利：ml-md-auto。

Answer 6

回答by James Pike

Use ml-autoinstead of mr-autoafter applying navjustify-content-end to the ul

使用ml-auto，而不是mr-auto应用后nav证明内容端到ul

Answer 7

回答by Maijied Hasan Shuvo

Use this code to move items to the right.

使用此代码将项目向右移动。

<div class="collapse navbar-collapse justify-content-end">

Answer 8

回答by J Kennedy

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, 之后立即在左侧显示主页、功能和定价，然后在右侧登录和注册，然后将两个列表包装起来<div>并使用.justify-content-between：

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

Answer 9

回答by SKL

Just add mr-autoclass at ul:

只需mr-auto在ul以下位置添加课程：

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

Answer 10

回答by mubsher

use the flex-row-reverse class

使用 flex-row-reverse 类

<nav class="navbar navbar-toggleable-md navbar-light">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" 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>
        <a class="navbar-brand" href="#">
            <i class="fa fa-hospital-o fa-2x" aria-hidden="true"></i>
        </a>
        <div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
            <ul class="navbar-nav">
                <li><a class="nav-item nav-link active" href="#" style="background-color:#666">Home <span class="sr-only">(current)</span></a</li>
                <li><a class="nav-item nav-link" href="#">Doctors</a></li>
                <li><a class="nav-item nav-link" href="#">Specialists</a></li>
                <li><a class="nav-item nav-link" href="#">About</a></li>
            </ul>
        </div>
    </div>
</nav>

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

提问by Luuk Wuijster

This is what I have tried so far:

这是我迄今为止尝试过的：

This is my code:

这是我的代码：

回答by Zim

回答by Craig van Tonder

回答by Muhammad Tarique

回答by geet Sebastian

回答by ClemC

回答by James Pike

回答by Maijied Hasan Shuvo

回答by J Kennedy

回答by SKL

回答by mubsher

相关推荐

最近更新

标签

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

提问by Luuk Wuijster

This is what I have tried so far:

这是我迄今为止尝试过的：

This is my code:

这是我的代码：

回答by Zim

回答by Craig van Tonder

回答by Muhammad Tarique

回答by geet Sebastian

回答by ClemC

回答by James Pike

回答by Maijied Hasan Shuvo

回答by J Kennedy

回答by SKL

回答by mubsher

相关推荐

如何使用 Google Material Icon 设置 CSS 内容属性？

CSS 悬停进出时从左到右划下划线

CSS 删除列之间的间距

Angular 2 - 全局 CSS 文件

相关推荐

最近更新

标签