![](/img/trans.png)
[英]Navbar does not collapse and center in Twitter Bootstrap 3 template
[英]Twitter Bootstrap 3 navbar collapse
我正在尝试将我的Twitter Bootstrap 2导航栏迁移到Bootstrap 3.我的导航栏中有3个部分。
“myContent1”和“myContent2”将始终可见。 对于小屏幕,“myContent3”将被折叠。 但是当我在小屏幕设备中单击堆叠按钮时,折叠菜单不会打开。 单击按钮时没有任何反应。
我把它放进一个小提琴: http : //jsfiddle.net/mavent/LDP8K/6/
<nav class="navbar navbar-inverse navbar-fixed-top navbar-sam-main" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand navbar-left" href="" title="aaaa" id="MyContent1">
MySite
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-mycol">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav navbar-left" id="myContent2">
<li class="dropdown" id="users">
<a class="navbar-brand" href="" title="aaa" style="display:inline-block;padding-right:0px;">
<img src="" width="24" height="24" alt="aaaa">
MyName
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#users" style="display:inline-block;padding-left:0px;">
<b class="caret" style="border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #999;"></b>
</a>
<ul class="dropdown-menu">
<li><a href=""><img src="" width="24" height="30"/> OtherName</a></li>
<li class="divider"></li>
<li><a href="">AAAA</a></li>
<li><a href="">BBB</a></li>
</ul>
</li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-mycol">
<ul class="nav navbar-nav navbar-right" id="myContent3">
<li><a href="">UUUU</a></li>
<li><a href="">YYYYY</a></li>
<li class="dropdown" id="wer">
<a class="dropdown-toggle" data-toggle="dropdown" href="#wer">Tools
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="">aaaa</a></li>
<li><a href="">bbbb</a></li>
<li><a href="">cccc</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
编辑:在一个人的建议下,我将“切换按钮”放在navbar-header
部分之外。 我给了按钮top:0 and right:0
按钮的绝对样式。 但在这种情况下,如果屏幕非常小, myContent2
进入按钮。 你可以从中看到这种行为: http : //jsfiddle.net/mavent/paXt9/2/
Edit2:我需要这个行为:
对于大屏幕,可以看到外观。
对于较小的屏幕, myContent2
可见, myContent3
已折叠。 如果单击按钮,则myContent3
未展开。
对于非常小的屏幕, myContent2
将在下一行显示。 所以myContent2
和按钮不会互相冲突。
下拉元素占用整个导航栏宽度并阻止按钮工作,修复可以为品牌链接和导航栏切换按钮设置更高z-index的内容:
.navbar-sam-main .navbar-toggle, .navbar-sam-main .navbar-brand {
position: relative;
z-index:1;
}
对于在评论部分提出的其他问题,修复方法是将下拉链接和插入符号包装在一个范围中,以使它们作为单个元素包装,并使用媒体查询将链接显示在中心时落到第二行:
HTML
<li class="dropdown" id="users">
<span>
<a class="navbar-link" href="" title="aaa" style="display:inline-block;padding-right:0px;">
<img src="" width="24" height="24" alt="aaaa" />
MyName
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#users" style="display:inline-block;padding-left:0px;">
<b class="caret" style="border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #999;"></b>
</a>
</span>
<ul class="dropdown-menu">
...
</ul>
</li>
CSS
.navbar-sam-main .navbar-nav > li >span {
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
.navbar-sam-main .navbar-nav > li >span .navbar-brand {
padding-top: 0;
padding-bottom: 0;
}
@media (max-width: 270px) {
#myContent1 > li.dropdown {
text-align: center;
}
#myContent1 > li.dropdown >ul {
text-align:left;
}
}
我认为你应该使用具有屏幕宽度断点的响应式实用程序类,例如:
.hidden-sm
.visible-lg
更多信息: http : //getbootstrap.com/css/#responsive-utilities
尽量不要覆盖随Bootstrap提供的布局机制,并在最初的状态下创建布局,然后使用我提到的类覆盖可见性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.