Bootstrap 将导航栏项目向右对齐 [英] Bootstrap align navbar items to the right
问题描述
如何将导航栏项目向右对齐?
我想登录并注册到右侧.但是我尝试的所有方法似乎都不起作用.
这是我迄今为止尝试过的:
- 在
周围加上属性:style="float: right"
围绕
并带有属性:style="text-align: right"
- 在
标签上尝试了这两件事
- 再次尝试所有这些事情,并将
!important
添加到最后- 将
中的nav-item
改为nav-right
- 在
中添加了一个pull-sm-right
类- 在
中添加了一个align-content-end
类这是我的代码:
<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="切换导航"><span class="navbar-toggler-icon"></span>按钮><a class="navbar-brand" href="#">Navbar</a><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></a><li class="nav-item"><a class="nav-link" href="#">功能</a><li class="nav-item"><a class="nav-link" href="#">定价</a><ul class="navbar-nav" ><li class="nav-item"><a class="nav-link" href="{{ url('/login') }}">登录</a><li class="nav-item"><a class="nav-link" href="{{ url('/register') }}">注册</a></nav>@yield('内容')解决方案Bootstrap 5(2021 年更新)
在 Bootstrap 5 中(
相关:Bootstrap NavBar with left,居中或右对齐的项目
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
!important
added to the end - changed
nav-item
tonav-right
in the<li>
- added a
pull-sm-right
class to the<li>
- added a
align-content-end
class to the<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>
解决方案Bootstrap 5 (update 2021)
In Bootstrap 5 (see this question),
ml-auto
has been replaced withms-auto
to representstart
instead ofleft
. Since the Navbar is still based on flexbox, auto margins OR flexbox utility classes are still used to align Navbar content.For example, use
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 right align Navbar content
Bootstrap 4 (original answer)
Bootstrap has many different ways to align navbar items.
float-right
won't work because the navbar is nowflexbox
.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 singlenavbar-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
There are also flexbox utils. For example use
justify-content-end
on the collapse menu:<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>
Or when you have 2
navbar-nav
s, usejustify-content-between
innavbar-collapse
would work to even the space between the navbar-navs:<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 newer
As of Bootstrap 4 beta,
ml-auto
will still work to push items to the right. Just be aware the thenavbar-toggleable-
classes have changed tonavbar-expand-*
Updated navbar right for 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.
Right align button that is always visible
Related: Bootstrap NavBar with left, center or right aligned items
这篇关于Bootstrap 将导航栏项目向右对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文