我正在玩Bootstrap 4,更具体地说是导航栏菜单。有没有办法让小导航栏切换按钮对齐到页面右侧,而不是让它浮动到徽标旁边的左侧?
这是我目前的代码。
@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>
&#13;
感谢您的帮助:)
答案 0 :(得分:11)
只需将班级ml-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>
答案 1 :(得分:2)
使用.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>
或者将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;
}
&#13;
<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>
&#13;
答案 2 :(得分:1)
将课程向右拉,您将获得您正在寻找的结果。
<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>
或者您可以使用以下参数定义样式:
float: right !important;
答案 3 :(得分:0)
这就是我解决这个问题的方法:
<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>
请注意,您必须使用clearfix,因为否则按钮中的浮动会在菜单崩溃时对菜单执行时髦的操作。
答案 4 :(得分:0)
这对我在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">
甚至更简单来自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>
答案 5 :(得分:0)
.navbar-light .navbar-nav .nav-link {
color: rgb(255, 255, 255) !important;
}
.navbar {
display: block !important;
min-height: 54px;
}
.pull-right{
float:right !important;
}
&#13;
<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>
&#13;
答案 6 :(得分:0)
您必须像另一个按钮标签一样对齐它,首先将其包装在容器中以便以后移动。之后,使用.text-right类创建一个div,然后将切换按钮放入其中。请参见下面的示例。
<div class='container'>
<div class='text-right'>
<button> Button1 </button>
</div>
</div>
或
<div class='container text-right'>
<button> Button1 </button>
</div>enter code here
这两个解决方案在Bootstrap 4.5中都可以完美运行
答案 7 :(得分:0)
只需使用import numpy as np
real = np.ones((2, 3))
imag = 2*np.ones((2, 3))
complex = np.vectorize(complex)(real, imag)
# OR
complex = real + 1j*imag
,您的问题就可以解决。
它应该像这样:
navbar-expand-lg