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.

• <div>在<ul>周围，带有属性:style="float: right"
• <div>在<ul>周围，带有属性:style="text-align: right"
• 在<li>标记上尝试了这两件事
• 再次尝试了所有这些操作，最后添加了!important
• 在<li>
中将nav-item更改为nav-right
• 在<li>
中添加了pull-sm-right类
• 在<li>
中添加了align-content-end类

• <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 !important added to the end
• changed nav-item to nav-right in the <li>
• added a pull-sm-right class to the <li>
• added a align-content-end class to the <li>

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

推荐答案

Bootstrap 4 具有

Bootstrap 4 has many different ways to align navbar items. float-right won't work because the navbar is now flexbox.

您可以在 1st (左侧)navbar-nav上使用mr-auto来获得自动右页边距. 或者，可以在第二个(右)navbar-nav上使用ml-auto，或者如果您只有一个navbar-nav.

You can use mr-auto for auto right margin on the 1st (left) navbar-nav. Alternatively, ml-auto could be used on the 2nd (right) navbar-nav , or if you just have a single 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

还有flexbox实用程序.在这种情况下，您有2个navbar-nav，因此navbar-collapse中的justify-content-between将使它们之间的空间均匀，

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

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

---

针对Bootstrap 4.0及更高版本的更新

从Bootstrap 4 beta开始，ml-auto仍将向右推送项目.请注意，navbar-toggleable-类已更改为navbar-expand-*

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

更新了适用于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 NavBar，居中或右对齐的项目

这篇关于Bootstrap 4将导航栏项目向右对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！