Bootstrap 3.0附带列表更改宽度

我正在迁移到bootstrap 3.0.0，我遇到了粘贴菜单的问题：一旦粘贴（10px滚动后），它的宽度就会改变。 在这个小提琴中，它变得更小，在我的真实网站中它变得更宽，并扩大了实际的内容。

它与引导v2.3.2完美的工作。 检查后，看起来像列表项不能很好地显示.affix {position: fixed;}出现。

有任何想法吗？

解决scheme：基于最新的评论，我最终添加了这个JS片断，很好地修复它，而不必为固定元素设置固定宽度： 

 $(function() { var $affixElement = $('div[data-spy="affix"]'); $affixElement.width($affixElement.parent().width()); });

我有同样的问题，并解决这个问题： 

  $(window).resize(function () { $('#category-nav.affix').width($('#content').width()); });

基本上是在resize的事件，我计算内容div的宽度，并设置固定元素的宽度。 

 $(window).scroll(function () { $('#secondary .widget-area.affix').width($('#secondary').width()); });

这是另一个版本： 

 $('.sitebar .affix-top').width($('.sitebar .affix-top').width()); $(window).resize(function () { $('.sitebar .affix').width($('.sitebar .affix-top').width()); }); $(window).scroll(function () { $('.sitebar .affix').width($('.sitebar .affix-top').width()); });

这是我的版本。 

 var fixAffixWidth = function() { $('[data-spy="affix"]').each(function() { $(this).width( $(this).parent().width() ); }); } fixAffixWidth(); $(window).resize(fixAffixWidth);

CSS 

 div.affix { position: fixed !important; }

有同样的问题一次（只在BS 2.3.2）。

不是一个答案，更多的是一个黑客 ：我给贴了元素的宽度。 这吸了，因为我不得不为所有分辨率设置宽度（RWD），实际上值应该是标准列宽（例如.span4）。

是： position: fixed从给定的上下文中取出元素（在你的情况col-md-3 ）。

我使用这个代码来修复词缀的宽度。 

 $(document).on('affixed.bs.affix',function(e){ $('.affix').each(function(){ var elem = $(this); var parentPanel = $(elem).parent(); var resizeFn = function () { var parentAffixWidth = $(parentPanel).width(); elem.width(parentAffixWidth); }; resizeFn(); //$(window).resize(resizeFn); }); });

词缀得到他的父母的宽度，并检查每个卷动networking上的宽度。 取消注释最后一行，在调整窗口大小的事件上也执行。

我用$('.affix-element').width($('.affix-element-parent').width()).affix()

效果很好 ：）

我的解决scheme，以及： 

 $('.menu-card').affix(); $(document).on('affix.bs.affix', '.menu-card', function() { $(this).width($(this).width()); });

（.menu卡是我粘的div）

我添加了这个支持窗口大小调整：

让我们假设这个词缀在一个父div＃menu-card-pane中。 

 $(window).resize(function () { var parentSize = $('#menu-card-pane').width(); $('.affix').each(function() { var affixPadding = $(this).innerWidth() - $(this).width(); $(this).width(parentSize - affixPadding); }); });

这是我的HTML 

  <div class="sidebar-nav"> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#committees-navbar"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <span class="visible-xs navbar-brand">Committees</span> </div> <div id="committees-navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav nav-stacked" data-spy="affix" data-offset-top="250"> <li class="col-xs-12"><a ng-click="scrollTo('boardCommittee')">BOARD OF DIRECTORS</a></li> <li class="col-xs-12"><a ng-click="scrollTo('madrasaCommittee')">MADRASATUL JAMALIYAH</a></li> <li class="col-xs-12"><a ng-click="scrollTo('shababCommittee')">SHABAB</a></li> <li class="col-xs-12"><a ng-click="scrollTo('bwaCommittee')">BURHANI WOMEN</a></li> <li class="col-xs-12"><a ng-click="scrollTo('tncCommittee')">TAISEER UN NIKAH</a></li> <li class="col-xs-12"><a ng-click="scrollTo('fmbCommittee')">FAIZUL MAWAIDUL BURHANIYAH</a></li> <li class="col-xs-12"><a ng-click="scrollTo('websiteCommittee')">WEBSITE</a></li> <li class="col-xs-12"><a ng-click="scrollTo('tadfeenCommittee')">TADFEEN</a></li> </ul> </div><!--/.nav-collapse --> </div> </div>

这是我的JS修复 

 $(function () { var resize = function () { var sidebarNav = $(".sidebar-nav"); var sidebarNavAffix = $(".sidebar-nav .affix"); if (sidebarNavAffix.length && (sidebarNavAffix.width() !== sidebarNav.width())) { sidebarNavAffix.width(sidebarNav.width()); } } $(window).on({"scroll" : resize, "resize" : resize}); });
Interesting Posts