Bootstrap 4将导航栏项目alignment到右侧

如何将导航栏项目alignment？

我想要login并注册到右侧。 但是我所尝试的一切似乎都不起作用。

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

• 使用atribute： style="float: right"的<ul> <div>围绕<ul>
• <div>围绕<ul>加上atribute： style="text-align: right"
• 在<li>标签上尝试了这两件事
• 再次尝试所有这些事情!importantjoin到最后
• 在<li> nav-right nav-item更改为nav-right
• 在<li>添加了一个pull-sm-right类
• 向<li>添加了一个align-content-end类

这是我的代码：

 <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

float-right将不起作用，因为导航栏现在是flexbox 。 您可以使用新的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> </div> 

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

或者，可以在第二个（右侧）导航栏上使用ml-auto 。

---

Bootstrap 4 Beta更新

在testing版中， ml-auto仍然可以将项目推向右侧。 请注意， navbar-toggleable-类已经更改为navbar-expand-*

更新了Bootstrap 4 beta的导航栏

Answer 2

在我的情况下，我只想要一组导航button/选项，并发现这将工作：

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

这是一个工作的例子 。

Answer 3

将nav justify-content-end应用到ul后，使用ml-auto而不是mr-auto

Answer 4

如果您希望在nav-brand后立即在左边find“主页”，“function”和“定价”，然后login并右键注册，则将两个列表包装在<div>并使用.justify-content-between ：

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

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

Answer 6

只需在ul处添加mr-auto类即可

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

Answer 7

我正在运行Angular 4（v.4.0.0）和ng-bootstrap（Bootstrap 4）。 这个代码不是全部都是相关的，但希望人们可以select什么工作。 我花了一段时间find一个解决scheme，让我的项目正确，合理的崩溃，并实施从我的谷歌（使用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='../assetshttp://img.dovov.comlogo-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> 

Answer 8

对于Bootstrap 4testing版，带有与右侧alignment的元素的示例导航栏是：

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

Answer 9

在verndor-prefixes.less中find69行，并写下如下：

 .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); } 

Answer 10

使用自举弹性盒帮助我们控制导航元素的位置和alignment。 对于上面的问题添加mr-auto是一个更好的解决scheme。

 <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 

Answer 11

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> 

Answer 12

我是新来堆栈溢出和新的前端开发。 这是为我工作。 所以我不希望列表项被显示。

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