我正在迁移到bootstrap 3.0.0并且我在左边有一个附加菜单的问题:一旦它被粘贴(在10px滚动之后),它的宽度就会改变.在这个小提琴中它变得更小,在我的真实网站中它变得更宽,并扩展了实际内容.
它与bootstrap v2.3.2完美配合.检查后看起来列表项目与.affix {position: fixed;}
出现的不匹配.
有任何想法吗?
解决方案:基于最新的评论,我最后添加了这个JS片,它可以很好地修复它,而不必为固定元素设置固定宽度:
$(function() {
var $affixElement = $('div[data-spy="affix"]');
$affixElement.width($affixElement.parent().width());
});
Run Code Online (Sandbox Code Playgroud) 我的博客内容div
与id
的#content
.当我选择它时,例如使用Firebug,它概述了它的全部高度,div
其顶部和底部的所有填充和边距.
jQuery height()
只返回元素本身的内部高度.
如何查询元素的完整高度?如果其他元素中有很多填充和边距,我希望它们全部加起来并作为一个值.
我应该使用哪种方法?
如何将Affix(Twitter Bootstrap 3)的偏移量更改为其他值?
当我试图像这样两次调用方法时,第二个似乎被忽略并且没有任何效果:
$('#navbar-main').affix({ offset: 100});
$('#navbar-main').affix({ offset: 200}); // ---> the offset will not change to 200px
Run Code Online (Sandbox Code Playgroud)
在第二次.affix
调用之前重置回调affix
也无济于事:
$('#navbar-main').affix({ offset: 100});
$(window).off('.affix');
$('#navbar-main').affix({ offset: 200}); // ---> the offset will not change to 200px
Run Code Online (Sandbox Code Playgroud) 我已经搜索了整堆,但似乎无法找到一个有效的解决方案.基本上我的NavBar完全是我想要的.我现在想要缩小NavBar,当我的页面向下滚动时,使用漂亮的平滑过渡(动画)使其变得更加纤细.
这是我当前NavBar的HTML标记:
<header>
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img class="animated bounceIn" src="img/logo-light.png" alt="I Web You – Perth Website Branding"></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</nav>
</header>
Run Code Online (Sandbox Code Playgroud)
我有什么想法可以达到这个目的吗?我做了很多搜索,但大多数解决方案都是针对Bootstrap …