问题
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?
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 :)
回答1:
just add the class ml-auto to your toggle button
in that way you make 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>
回答2:
Use .float-xs-right class:
<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-toggler as the below snippet:
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>回答3:
Put the class pull-right and 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;
回答4:
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.
回答5:
This is what works for me in 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
<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>
回答6:
.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>来源：https://stackoverflow.com/questions/41153123/align-navbar-toggle-button-to-the-right