首页
前端开发
Twitter bootstrap 3 导航栏导航栏-右侧导航栏折叠
Twitter bootstrap 3 导航栏导航栏-右侧导航栏折叠
[英] Twitter bootstrap 3 navbar navbar-right outside navbar-collapse
本文介绍了Twitter bootstrap 3 导航栏导航栏-右侧导航栏折叠的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在 Twitter 引导程序 2.3.2 中,我可以有类似的东西:http://jsfiddle.net/aQwUZ/3/
<div class="navbar-inner"><div class="容器"><a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><a href="#" class="brand">BRAND</a><ul class="nav pull-right"><li><a href="#">固定链接</a><div class="nav-collapse"><ul class="nav"><li><a href="#">L1</a></li><li><a href=#">L2</a></li>
一个 twitter 引导导航栏,在移动响应视图中,固定链接"在标题中保持可见.
现在,在引导程序 3 中,升级我的代码后,我只能拥有:http://jsfiddle.net/EC3Ly/4/
<div class="容器"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>按钮><a class="navbar-brand" href="#">BRAND</a>
<ul class="nav navbar-nav navbar-right"><li><a href="#">固定链接</a><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li><a href="#">L1</a></li><li><a href=#">L2</a></li>
</nav>
在移动响应视图中,我得到 2 行...我试图包装在导航栏标题"节点 http://jsfiddle.net/EC3Ly/5/ 或第一个导航栏标题"没有成功.
我错过了什么?
谢谢,
亚历山大
解决方案
移动导航栏中的两行是由于navbar-header的clearfix引起的:
.navbar-header {.clearfix();@media(最小宽度:@grid-float-breakpoint){向左飘浮;}}
您可以使用媒体查询和 css 来撤消此清除修复(并在折叠的下拉列表之前添加一个新的)
.navbar-right {float: right !important;}@media(最大宽度:767px){.navbar-right {margin-right:20px;}.navbar-header:after{明确:无;}.navbar-nav.navbar-right >li { 浮动:左;}.navbar-collapse:before {clear:both;}.navbar-collapse {overflow-y: hidden;}.navbar-collapse.in {溢出-y:可见;}.navbar{border-color: #101010;边框宽度:0 0 1px;}.navbar-collapse.in >ul {边框颜色:#101010;边框顶部:1px 双;}}}
演示:http://bootply.com/82366
媒体查询还在较小的屏幕上为导航栏右侧添加了一个浮动右侧.要在生产中使用此代码,您可能需要修复边框和导航栏 css 转换.
In Twitter bootstrap 2.3.2 I can have something like:
http://jsfiddle.net/aQwUZ/3/
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="#" class="brand">BRAND</a>
<ul class="nav pull-right">
<li>
<a href="#">Fixed Link</a>
</li>
</ul>
<div class="nav-collapse">
<ul class="nav">
<li><a href="#">L1</a></li>
<li><a href=#">L2</a></li>
</ul>
</div>
</div>
</div>
</div>
A twitter bootstrap navbar, where in mobile responsive view, "Fixed Link" stay visible in header.
Now, in bootstrap 3, after upgrade my code, I can only have:
http://jsfiddle.net/EC3Ly/4/
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">BRAND</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Fixed Link</a>
</li>
</ul>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">L1</a></li>
<li><a href=#">L2</a></li>
</ul>
</div>
</div>
</nav>
in mobile responsive view, I get 2 lines...
I tried to wrap in a "navbar-header" node http://jsfiddle.net/EC3Ly/5/ or in the first "navbar-header" without success.
What did I miss?
Thanks,
Alexandre
解决方案
The two lines in the mobile navbar are caused by the clearfix of the navbar-header:
.navbar-header {
.clearfix();
@media (min-width: @grid-float-breakpoint) {
float: left;
}
}
You could use media queries and css to undo this clearfix (and add a new before the collapsed dropdown)
.navbar-right {float: right !important;}
@media(max-width:767px)
{
.navbar-right {margin-right:20px;}
.navbar-header:after
{
clear: none;
}
.navbar-nav.navbar-right > li { float: left; }
.navbar-collapse:before {clear:both;}
.navbar-collapse {overflow-y: hidden;}
.navbar-collapse.in {overflow-y: visible;}
.navbar{border-color: #101010; border-width: 0 0 1px;}
.navbar-collapse.in > ul {border-color: #101010; border-top:1px double;}
}
}
demo: http://bootply.com/82366
The media queries also add a float right for the navbar-right on smaller screens. To take this code in production, you maybe will fix the borders and possible the navbar css transisions too.
这篇关于Twitter bootstrap 3 导航栏导航栏-右侧导航栏折叠的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文