Html 将导航栏切换按钮向右对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41153123/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 14:08:03 来源:igfitidea点击:
Align navbar toggle button to the right
提问by user3599852
I'm having a play around with Bootstrap 4, more specifically the navbar menu. Is there is a way I can make the little navbar toggle button align to the right of the page rather than have it floating to the left next to the logo?
我正在尝试使用 Bootstrap 4，更具体地说是导航栏菜单。有没有一种方法可以让小导航栏切换按钮与页面右侧对齐，而不是让它浮动到徽标旁边的左侧？
This is my current code.
这是我目前的代码。
@media (min-width: 992px) {
.navbar-nav li a { line-height: 85px; }
}
@media (max-width: 991px) {
.navbar-brand { float: none; }
}
.navbar-toggler{
border:none;
width:1em;
} <nav class="navbar navbar-light bg-faded navbar-full">
<a class="navbar-brand" href="#"><img class="img-fluid" src="img/logoMedium.png" /></a>
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-md" id="navbarResponsive">
<ul class="nav 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="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Solar Power</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">No Obligation Quote</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>Thanks for the help :)
谢谢您的帮助 ：）
回答by Sergey Solovyov
just add the class ml-autoto your toggle button
in that way you make margin-left:auto
只需将类添加ml-auto到您的切换按钮中，您就可以制作 margin-left:auto
<button type="button" class="navbar-toggler ml-auto hidden-sm-up float-xs-right" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
回答by Syden
Use .float-xs-rightclass:
使用.float-xs-right类：
<button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
Or add float: right;to .navbar-toggleras the below snippet:
或添加float: right;到.navbar-toggler以下代码段：
Note that pull-right has been removed in v4.
@media (min-width: 992px) {
.navbar-nav li a {
line-height: 85px;
}
}
@media (max-width: 991px) {
.navbar-brand {
float: none;
}
}
.navbar-toggler {
border: none;
width: 1em;
float: right;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-light bg-faded navbar-full">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="img/logoMedium.png" />
</a>
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-md" id="navbarResponsive">
<ul class="nav 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="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Solar Power</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">No Obligation Quote</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>回答by Jeroen Corteville
This is how I solved this:
这就是我解决这个问题的方法：
<header>
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<a class="navbar-brand" href="#">Fixed top</a>
<button type="button" class="navbar-toggler hidden-sm-up float-xs-right" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="clearfix"></div>
<div class="collapse navbar-toggleable-xs" id="navbarResponsive">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Planets</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Spaceships</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
Note that you have to use the clearfix, because otherwise the float from the button would do funky things to the menu while it's collapsing.
请注意，您必须使用 clearfix，否则按钮上的浮动会在菜单折叠时对菜单产生奇怪的影响。
回答by Dan
Put the class pull-rightand you'll get the result that you're looking for.
将类拉右，你会得到你正在寻找的结果。
<button class="navbar-toggler hidden-lg-up pull-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
or you can define a style with the following parameters:
或者您可以使用以下参数定义样式：
float: right !important;
回答by Alberto L. Bonfiglio
This is what works for me in Bootstrap 4
这在 Bootstrap 4 中对我有用
<button type="button" class="navbar-toggler navbar-toggler-right"
data-toggle="collapse" data-target=".navbar-collapse"
aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
or even simpler from Bootstrap docs
甚至更简单的Bootstrap 文档
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
回答by Mitali
.navbar-light .navbar-nav .nav-link {
color: rgb(255, 255, 255) !important;
}
.navbar {
display: block !important;
min-height: 54px;
}
.pull-right{
float:right !important;
}<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: #de7a22 !important;">
<button class="navbar-toggler pull-right" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-home"></i><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Home</a></li>
<li class="nav-item">
<a class="nav-link" href="#">About</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Sponsorship</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a></li>
</ul>
</div>
</nav>
</body>