css – Twitter bootstrap 3:当贴纸触发时,导航栏会更改宽度

嗯,我有一个关于bootstrap-3附加脚本的好奇问题.您可以在此 fiddle中看到问题.请将结果框架水平最大化并向下滚动,以使附件被触发.正如你所看到的,导航栏在右边增加,我真的看不到任何这样的原因.我暂时解决了这个问题
.container
{
padding-left: 0px;
padding-right: 0px;
}

到css.但是,正如你所看到的,它不是很漂亮,我不想删除这些paddings.或者,我可以设置一个静态宽度,如

width: 1140px;

在#nav.affix.但这不是很敏感的…我真的尝试了很多方法,但无法得到任何令人满意的结果.你知道吗,是什么原因?

编辑

好的,Chrome的调试器给了我更多的信息:在贴子被触发之前,nav-element得到了类’affix-top'(从chrome-debugger的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.

滚动和粘贴被触发后,类’affix-top’更改为’affix’,’affix’的大小如下:1170px x 52px.

这些是30px,导航栏在右边增长.但是我怎么能阻止呢?最重要的是,我找不到任何csv文件中的class affix-top …

解决方法

你不能解决这个问题.问题是位置:固定. Navbar将由浏览器呈现,而没有左或右的属性.

你只能用三件事来解决问题:

1.使用绝对定位.

使用位置:绝对;并使用jQuery更改滚动的顶级值.缺点:你需要一个Javascript部分.

2.设置左/右

设置左:?px;或右:?px

3.定义一个特殊的宽度

设置最小宽度:?px;和/或max-width:?px;对于每个媒体查询

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效