好吧,我对bootstrap-3词缀脚本有一个奇怪的问题。您可以在fiddle中看到问题。请水平最大化结果框并向下滚动,以使词缀被触发。如您所见,导航栏在右侧增加,我真的看不到有这种效果的任何原因。我暂时用addng解决了这个问题
.container
{
padding-left: 0px;
padding-right: 0px;
}
到CSS。但是,正如您所看到的,它不是很漂亮,我也不想删除这些填充。另外,我可以设置静态宽度,例如
width: 1140px;
在#nav.affix中。但这反应不是很好...我确实尝试了很多方法,但无法获得令人满意的结果。你知道是什么原因吗?
编辑
好的,Chrome的调试器为我提供了更多信息:在词缀被触发之前,nav-element获得了“affix-top”类(摘自chrome-debugger NOT html源!):
<nav id="nav" class="navbar navbar-default affix-top" role="navigation" data-spy="affix" data-offset-top="133" style="background-color: yellow">
奇怪的是,HTML代码中没有声明affix-top。不过,#nav.nav.navbar.navbar-default-affix-top的尺寸为:1140px x 52px。
滚动并触发词缀后,类“词缀顶部”更改为“词缀”,并且“词缀”的大小如下:1170px x 52px。
这些是30px,导航栏会向右扩展。但是我怎么能阻止它呢?最重要的是,我在任何csv文件中都找不到affix-top类。
最佳答案
您无法解决。问题是position: fixed;
。导航栏将由浏览器呈现,不带有left
或right
属性。
您只能通过三件事解决问题:
1.使用绝对定位。
使用position: absolute;
并在使用jQuery滚动时更改top
的值。缺点:为此,您需要使用Javascript部分。
2.设置左/右
设置一个left: ?px;
或right: ?px
3.定义特殊宽度
为每个媒体查询设置一个min-width: ?px;
和/或max-width: ?px;
关于css - Twitter bootstrap 3:词缀触发时Navbar更改宽度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23870330/