Bootstrap 3.0的affix与列表结合导致宽度变化

Question

我正在将代码迁移到Bootstrap 3.0.0，但是左侧的固定菜单出现了问题：一旦它变成了固定的（在滚动10像素后），它的宽度就会发生改变。在这个示例中，它会变小，在我的实际网站上，它会变得更宽并扩展到实际内容。

使用Bootstrap v2.3.2时，它可以完美地工作。经过检查，似乎列表项与出现的.affix {position: fixed;}不兼容。

有什么想法吗？

解决方案：基于最新的评论，我终于添加了这个JS片段，它可以很好地解决问题，而无需为固定的元素设置固定宽度：

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

- Davor

---

实际上，它在没有列表的情况下具有相同的行为（例如使用表单元素）。 - Davor

如果有人感兴趣，这里是“前缀宽度问题和一些修复”的链接：https://github.com/twbs/bootstrap/issues/6350 - Sisir

@Sisir 非常酷，谢谢！我终于可以从我的代码中删除黑客，并有一个适当的解决方案（希望他们会将其添加到v3.1中）。 - Davor

Answer 1

我遇到了同样的问题，并用以下方法解决：

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

基本上，在调整大小的事件中，我会计算内容 div 的宽度，并将固定元素的宽度设置为该宽度。

- Gokhan Demirhan

---

只有调整大小事件对我不起作用（Primefaces/Bootsfaces）。但使用滚动事件（以下解决方案）解决了问题。 - tak3shi

Answer 2

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

- user1713577

Answer 3

这里有另一个版本：

$('.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());
});

- alex_wdmg

Answer 4

这是我的版本。

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

CSS

div.affix {
    position: fixed !important;
}

- Ronald Veenbrink

Answer 5

我使用这段代码来固定附加组件的宽度。

$(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);
    });
});

该词缀获取其父元素的宽度，并在每次滚动网页时检查该宽度。取消注释最后一行，也会在调整窗口大小事件上执行。

- Jaca Meza

Answer 6

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

效果很好 :)

- listenlight

Answer 7

我曾经遇到过同样的问题（仅在BS 2.3.2中出现）。

这不是答案，而是一种hack：我为附加的元素设置了一个宽度。那很糟糕，因为我必须为所有分辨率（RWD）设置宽度，并且实际上该值应该是标准列宽（例如.span4）。

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

- Frank Lämmer

---

谢谢 - 它确实起作用了，但是使用了很多媒体查询来使其响应式布局，感觉有点糟糕... 希望Bootstrap在某个时候能够修复它！ - Davor

Answer 8

我的解决方案也是这样的：

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

(.menu-card是我的固定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);
    });
});

- Camel

Answer 9

这是我的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});
});

- Ali Lane