Twitter引导导航栏和下拉菜单-不调整大小
Posted
技术标签:
【中文标题】Twitter引导导航栏和下拉菜单-不调整大小【英文标题】:Twitter bootstrap navbar and dropdown - not resizing 【发布时间】:2013-06-02 17:42:20 【问题描述】:我目前在导航栏中的菜单内使用下拉菜单。当导航栏处于高分辨率布局时,下拉菜单工作正常。
在移动布局中操作时,选择下拉菜单时导航栏不会调整大小,除非我打开导航栏,然后将其关闭,然后再次打开。在执行此操作时,我注意到导航栏不会在第一次打开时向下滑动 - 这让我相信这与 javascript 事件有关。
编辑 - 添加了之前和之后的导航折叠标记,以及预渲染。可以使用 nav-collapse div 的预渲染标记在 Bootply 中重现问题。
预渲染标记:
<div class="nav-collapse">
@PageTemplateFeature("Main Navigation")
<div class="pull-right">
@PageTemplateFeature("Service Menu")
</div>
</div>
重新开放之前:
<div class="nav-collapse in collapse" style="height: 176px;">
重新打开后:
<div class="nav-collapse in collapse" style="height: auto;">
标记:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
<a href="/" class="brand"><span style="color: black;"></span>.COM</a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="/">Home</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" role="button" href="#" tabindex="-1" id="drop_1">Magazine</a>
<ul aria-labelledby="drop_1" role="menu" class="dropdown-menu">
<li><a href="/Magazine/Current-Issue" tabindex="-1">Current Issue</a></li>
<li><a href="/Magazine/Digital-Edition" tabindex="-1">Digital Edition</a></li>
</ul>
</li>
<li><a href="/Blog">Blog</a></li>
</ul>
<div class="pull-right">
<ul class="nav">
<li><a href="/Sitemap"> Sitemap </a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
提前致谢。
【问题讨论】:
你们的图片有什么区别? (在第一个看不到“站点栏”旁边)?您在bootply.com/63417 上的代码没有问题吗?或者你能展示一下吗?调整大小的问题可能是由您的自定义 css 引起的。 添加到@BassJobsen 问题,您使用的是什么浏览器和浏览器版本?另外你使用的是什么版本的引导程序? 使用 bootstrap 2.3.1 的 bootply,但您可以轻松切换到旧版本。它适用于 FF en chrome。 使用引导程序 2.3.1。在 chrome 27、firefox 19、IE10 上出现问题。第一张图片显示博客和站点地图链接不适合导航栏,第二张图片显示导航栏正确调整大小。如果杂志下拉列表中有超过 2 个链接,它们也会被剪掉。 【参考方案1】:找到了解决办法,nav-collapse div也需要collapse类:
<div class="nav-collapse collapse">
@PageTemplateFeature("Main Navigation")
<div class="pull-right">
@PageTemplateFeature("Service Menu")
</div>
</div>
https://github.com/twitter/bootstrap/issues/5671
【讨论】:
以上是关于Twitter引导导航栏和下拉菜单-不调整大小的主要内容,如果未能解决你的问题,请参考以下文章