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

340

如何将导航栏项目右对齐？

我要登录并在右边注册。但是我尝试的所有方法似乎都无法正常工作。

导航栏的图片

到目前为止，这是我尝试过的：

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

这是我的代码：

<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>
css  twitter-bootstrap  flexbox  bootstrap-4  navbar 
— 卢克·伍斯特（Luuk Wuijster）
source
导航栏是使用alpha 6版本的flexbox构建的。
— 最大
1
是的，所以我该怎么做才能使其正确对齐。我已经尝试了几次flexbox运气，但没有任何运气。：/
— Luuk Wuijster

Answers:

525

Bootstrap 4有许多不同的方法来对齐导航栏项目。float-right因为导航栏现在已经不能工作flexbox。

您可以mr-auto在1号（左）使用自动右页边距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

还有一些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>

Bootstrap 4.0及更高版本的更新

从Bootstrap 4 Beta开始，ml-auto它将仍然可以将项目推向右侧。请注意，navbar-toggleable-班级已更改为navbar-expand-*

更新了适用于Bootstrap 4的导航栏

另一个常见的Bootstrap 4 导航栏右对齐方案包括在右侧的按钮，该按钮保持在移动折叠导航外部，因此始终以所有宽度显示该按钮。

右对齐按钮始终可见

在此处输入图片说明

在此处输入图片说明

相关：具有左，中或右对齐项的Bootstrap NavBar

— 齐姆
source
1
mr-auto如果最右边的项目是，则不起作用dropdown。下拉菜单项会溢出到页面的右边缘。
— Ege Ersoz '17
6
它的工作原理是：codeply.com/go/P0G393rzfm-问题不是mr-auto因为问题在于如何正确对齐。如果您对下拉菜单有疑问，请发布一个新问题，但您最有可能参考此问题：stackoverflow.com/questions/43867258/…–
— Zim
2
您还可以.dropdown-menu-right在导航栏中添加到右对齐的下拉菜单。不这样做可以在某些宽度上切断下拉菜单。
— rybo111
@ZimSystem感谢您的回答。我在这里一直在关注您的答案stackoverflow.com/questions/19733447/…。我有一个问题，如何才能在左侧获得一项，而在右侧获得一项？
— Lokesh Pandey
在codeply.com/go/P0G393rzfm中，您在左侧显示了一个ul，在右侧显示了一个ul。这是通过将mr-auto添加到第一个中来实现的。但是，如果我只有一个人怎么办？我不想创建一个空的ul只是为了将另一个对齐到右边。
— Santosh Kumar，
140

就我而言，我只需要一组导航按钮/选项，并发现这可以工作：

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

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

这是一个工作示例。

— 克雷格·范·唐德
source
3
@numediaweb在OP的示例中，他在导航中使用两个元素，左对齐一个，右对齐；我只用了一个，然后将其向右对齐。这不是正确的答案，但可以作为对问题稍有变化的答案；）
— Craig van Tonder
这适用于单个navbar-nav，但是该mr-auto方法在Bootstrap文档中使用。
— Zim
mr-auto用于文档中，但不用于使项目向左对齐。如本文所述，此答案在语义上是正确的：blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6
— qwaz 17-4-27的
问题是您要对齐2个链接列表还是1个。如果只有1个，您的答案有效并且对我很有帮助。谢谢！
— 赤脚
它对我有用，但是我不知道为什么这个答案上方的那个不起作用。
— Suhail Akhtar
59

对于仍在BS4中解决此问题的人，只需尝试以下代码- 

<ul class="navbar-nav ml-auto">
— 穆罕默德·塔里克（Muhammad Tarique）
source
7
否-将所有内容都向右对齐。问题是他只想将单个项目向右对齐。
— NickG
2
检查官方文档m*-auto，根据课程的位置将内容向左或向右推送
— Pierre de LESPINAY
@PierredeLESPINAY，是的，ml-auto确实可以将内容推送到最右边的位置，但是我只是想知道为什么mr-0不能完成这项工作？
— 鳄梨
42

在Bootstrap 4上

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

<ul class="navbar-nav ml-auto">
— 吉特·塞巴斯蒂安
source
32

上 Bootsrap 4.0.0-beta.2，这里列出的所有答案都没有对我有用。最后，Bootstrap站点不是通过文档而是通过页面源代码为我提供了解决方案...

Getbootstrap.com navbar-nav在以下类的帮助下将其权限向右对齐：ml-md-auto。

— 克莱姆
source
1
为我做得很漂亮。什么也没做。
— 玛丽亚·坎贝尔
9

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

<div class="collapse navbar-collapse justify-content-end">
— Maijied Hasan Shuvo
source
1
当您折叠了菜单时，该功能将不起作用，但是，使用ml-auto仍将起作用，因为折叠菜单时，<li>项仍占据宽度的100％，因此不会应用任何边距。
— 瑞安S
8

如果要在紧随其后在左侧显示主页，功能和价格nav-brand，然后在右侧登录并注册，然后将两个列表包装起来<div>并使用.justify-content-between：

<div class="collapse navbar-collapse justify-content-between">
<ul>....</ul>
<ul>...</ul>
</div>
— 肯尼迪
source
7

只需添加mr-auto类ul：

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

如果两侧都有菜单列表，则可以执行以下操作：

<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>
— SKL
source
5

使用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>
— 黑手党
source
2

boostrap 4几乎没有变化。要将导航栏对齐到右侧，只需进行两项更改。他们是：

  1. 在navbar-nav课堂上添加w-100为navbar-nav w-100使宽度为100
  2. 在nav-item dropdown课堂上添加ml-auto为nav-item dropdown ml-auto，使保证金保留为自动。

如果您不明白，请参阅我所附的图片。

CodePen链接

在此处输入图片说明

完整的源代码

<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="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav w-100">
      <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>
      <li class="nav-item dropdown ml-auto">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>  
  </div>
</nav>
— 阿南·拉贾（Anand Raja）
source
2

对于Bootstrap 4.3.1，我使用的是nav-pills，但对我来说没有任何作用：

    <ul class="nav nav-pills justify-content-end ml-auto">
    <li ....</li>
    </ul>
— 阿杰·库玛（Ajay Kumar）
source
0

我正在运行Angular 4（v.4.0.0）和ng-bootstrap（Bootstrap 4）。这段代码并非全部相关，但希望人们能够选择合适的方法。我花了一些时间找到一种解决方案，以使我的商品合理，正确折叠并实现我的Google下拉菜单（使用OAuth）个人资料图片。

<div id="header" class="header">
  <nav class="navbar navbar-toggleable-sm navbar-inverse 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="#">
          <img alt='Brand' src='../assets/images/logo-white.png' class='navbar-logo-img d-inline-block align-top '>
          <span class="navbar-logo-text">Oncoscape</span>
        </a>
    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav float-left">
        <a class="navbar-items nav-item nav-link active " *ngIf='authenticated' (click)='goDashboard()'>
          <span class="fa fa-dashboard"></span>Dashboard
        </a>
        <a class="nav-item nav-link navbar-items active" href="http://resources.sttrcancer.org/oncoscape-contact">
          <span class="fa fa-comments"></span>Feedback
        </a>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img *ngIf='user && authenticated'  class="navbar-pic" src={{user.thumbnail}} alt="Smiley face">
          </a>
          <div *ngIf='user && authenticated' class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" (click)="toProfile()">Account</a>
            <div class="dropdown-item">
              <app-login></app-login>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>
<router-outlet></router-outlet>
— 灰鹅
source
0

对于Bootstrap 4 beta，示例导航栏的元素与右侧对齐：

<div id="app" class="container">
  <nav class="navbar navbar-expand-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>
— 卡佐尔
source
0

使用bootstrap flex框可以帮助我们控制导航元素的放置和对齐。对于上述问题，添加mr-auto是一个更好的解决方案。

<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>
  @yield('content')
</div>

其他位置可能包括 

fixed- top
    fixed bottom
    sticky-top
— 马罗
source
0

BS的工作示例v4.0.0-beta.2：

<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" 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>

      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <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="#">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
          </li>
        </ul>
      </div>
    </nav>


    <div class="container-fluid">
      container content
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>
— 别尔哥罗斯
source
0

如果以上所有方法均失败，则将CSS的navbar类的宽度增加了100％。在那之前，auto先生在使用4.1的项目上对我不起作用。

— 多米尼克·戴维斯
source
-1

在verndor-prefixes.less中找到69行，并将其写为：

.panel {
    margin-bottom: 20px;
    height: 100px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
展开摘要

— 保罗
source
-2

只需从发布的版本4的getbootstrap页面之一中复制它，即可比上述版本更好地工作

<div class="d-none d-xl-block col-xl-2 bd-toc float-md-right">
    <ul class="section-nav">
         <li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
         <li class="toc-entry toc-h2"><a href="#classes">Classes</a></li>
         <li class="toc-entry toc-h2"><a href="#mixins">Mixins</a></li>
         <li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></li>
    </ul>
</div>
— 加里·莫尔顿
source
-3

我是堆栈溢出的新手，也是前端开发的新手。这对我有用。所以我不想显示列表项。

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

— 桑哈
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.