微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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;对于每个媒体查询

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效
js如何实现文字闪烁特效?(图文+视频)
CSS3怎么实现背景颜色渐变?(图文+视频)
Css3如何实现文本溢出隐藏并显示省略号效果
添加CSS的三种方式