Html 具有永久右对齐图标的引导导航栏
您好,我在创建包含不可折叠右对齐图标的引导(v3.3.4)导航栏时遇到问题。正确的解决方案应该有“品牌”,然后是主页按钮,然后是可折叠的左对齐菜单,最后是永不折叠的右对齐图标 我有一个例子,我一直在努力,这是接近所需的输出:Html 具有永久右对齐图标的引导导航栏,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,您好,我在创建包含不可折叠右对齐图标的引导(v3.3.4)导航栏时遇到问题。正确的解决方案应该有“品牌”,然后是主页按钮,然后是可折叠的左对齐菜单,最后是永不折叠的右对齐图标 我有一个例子,我一直在努力,这是接近所需的输出: 但是,右对齐的“信封”图标在单击右对齐的下拉菜单时移动(当页面较窄且左对齐的链接折叠时) 该问题与其他一些问题相关,但与其他一些问题不同(本模型部分基于这些问题): 非常感谢您的帮助。根据堆栈溢出请求粘贴到下面的代码 HTML: <nav class="
<nav class="navbar navbar-default navbar-static">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
<ul class="nav mynav pull-left">
<li>
<a title="Homepage" href="#"><i class="glyphicon glyphicon-home"></i></a>
</li>
</ul>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-left" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
<ul class="nav navbar-nav navbar-right mobileNav pull-right">
<li class="dropdown">
<a title="email" href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-download-alt"></span><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.container-fluid -->
</nav>
将此添加到CSS中:
@media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
position: absolute;
left: auto;
right: 0;
}
}
当前设置为位置:静态(引导默认值)和左/右未设置
编辑:以下是详细信息。更改在CSS框内的第34行之后。此CSS使用弹性框,对我来说效果很好。我是在
谢谢另外,为了便于将来参考,我意识到将css选择器从“.navbar nav.open.dropdown menu”更改为“.navbar-nav.navbar-right.open.dropdown menu”可以避免在折叠时碰撞左对齐的下拉菜单。。。
@media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
position: absolute;
left: auto;
right: 0;
}
}
.dropdown-menu > li
{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-content: space-around;
-ms-flex-line-pack: distribute;
align-content: space-around;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}