引导对齐导航栏项目向右

我如何对齐导航栏项目向右?

我想有登录和注册到右边。

.

.

.

Picture of Navbar

这是我目前为止所尝试的:

  • <div>包含在属性为style="float: right"<ul>周围
  • <div>包含在属性为style="text-align: right"<ul>周围
  • <li>标签上尝试了这两件事
  • !important添加到最后,再次尝试了所有这些事情
  • <li>中将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>
818130 次浏览

引导5(更新2021年)

在引导5 (看这个问题)中,ml-auto已被ms-auto取代,以表示start而不是left。由于导航栏仍然基于flexboxauto margin OR flexbox实用类仍然用于对齐导航栏内容。

例如,使用me-auto

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Menu </a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

Bootstrap 5右对齐导航栏内容


引导4(原始答案)

Bootstrap有许多不同的方式来对齐导航栏项目float-right将不起作用,因为导航栏现在是flexbox

你可以在1日 (left) navbar-nav上使用mr-auto作为自动右边距。 或者ml-auto可以用在2日(右)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="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
</nav>

https://codeply.com/go/P0G393rzfm

还有flexxutils。例如,在折叠菜单上使用justify-content-end:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
</div>
</div>
</nav>

或者当你有2个__abc0时,在navbar-collapse中使用justify-content-between可以平衡导航栏-导航之间的空间:

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

适用于引导4.0及更新版本

在Bootstrap 4 beta版中,ml-auto仍然可以将项目推到右边。只需要注意navbar-toggleable-类已经更改为navbar-expand-*

更新导航栏右引导4


另一个常见的引导4导航条右对齐场景包括一个按钮在右边残骸在外面移动崩溃导航,以便它总是显示在所有宽度。

始终可见的右对齐按钮

enter image description here

enter image description here

相关:引导导航栏左,中心或右对齐的项目

在我的情况下,我只想要一组导航按钮/选项,并发现这将工作:

<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

这是一个工作示例

我是栈溢出的新手,也是前端开发的新手。这对我来说很管用。所以我不希望显示列表项。

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

如果你想要主页、功能和定价在你的nav-brand之后的左边,然后登录和注册在右边,然后将这两个列表包装在<div>中并使用.justify-content-between:

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

只需在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>

我正在运行Angular 4 (v.4.0.0)和ng-bootstrap (Bootstrap 4)。这些代码并不都是相关的,但希望人们可以选择哪些是有效的。我花了一些时间来找到一个解决方案,让我的物品正确地证明,正确地折叠,并实现下拉我的谷歌(使用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>

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

在转换器前缀中找到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);
}

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

使用bootstrap伸缩盒有帮助 我们来控制您的导航元素的位置和对齐。 对于上述问题,添加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

在对ul应用nav justify-content-end后,使用ml-auto代替mr-auto

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>

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

Getbootstrap.com通过以下类的帮助将它们的右navbar-nav向右对齐:

对于那些仍在BS4中与此问题作斗争的人,请尝试下面的代码-

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

只是从发布版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>

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

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

关于Bootstrap 4

如果你想将brand对齐到左边,将所有导航栏项对齐到右边,将默认的mr-auto更改为ml-auto

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

如果以上都失败了,我在CSS中添加了100%宽度的导航栏类。在此之前,auto先生没有为我在这个项目上使用4.1。

这是boostrap 4的小变化。 要对齐导航栏右侧,你只需要做两个改变。 它们是:< / p >
  1. navbar-nav类中添加w-100作为navbar-nav w-100,使width为100
  2. nav-item dropdown类中添加ml-auto作为nav-item dropdown ml-auto,使左边距为auto。

如果你不明白,请参考我附上的图片。

< a href = " https://codepen。io / actionanand /钢笔/ wvvoxMj noreferrer“rel = > CodePen链接< / >

enter image description here

完整源代码

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

对于bootstrap 4.3.1,我使用navi -pill,除了这个,没有什么对我有效:

    <ul class="nav nav-pills justify-content-end ml-auto">
<li ....</li>
</ul>
在bootstrap v4.3中,只需在<ul class="navbar-nav">中添加ml-auto 例:<ul class="navbar-nav ml-auto"> < / p >

在我的案例Bootstrap v5中,我只想在右侧设置一组导航选项:

只需添加“ms-auto"ul。

它帮助了我。

<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ms-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link " aria-current="page" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link " href="services.php" tabindex="-1" aria-disabled="true">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.php">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Portfolio.php">Portfolio</a>
</li>
</ul>
    

</div>

令人惊讶的是,上面的答案并不适合我,所以下面是我的方法。要将登录注册导航栏项向右对齐,您可以使用以下两种方法中的任何一种:

    <李> < p > : 将登录和注册的无序列表标签修改为

    <ul class="navbar-nav pull-right">

    <李> < p > navbar-right: 将登录和注册的无序列表标签修改为

    <ul class="navbar-nav navbar-right">