Bootstrap 3.0 affix со списком меняется ширина

Question

Я переношусь на bootstrap 3.0.0, и у меня проблемы с прикрепленным меню слева: как только он становится прикрепленным (после прокрутки 10px), его ширина изменяется. В this fiddle он становится меньше, на моем реальном сайте он расширяется и расширяется по фактическому контенту.

Он отлично работал с бутстрапом v2.3.2. После проверки это выглядит так, что элементы списка плохо воспроизводятся с появившимся .affix {position: fixed;}.

Любые идеи?

РЕШЕНИЯ: на основе последних комментариев, которые я наконец-то добавил этот JS куска, который фиксирует это красиво без необходимости устанавливать фиксированную ширину к прикрепленному элементу:

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

Answer 1

У меня была такая же проблема, и фиксируется с этим:

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

в основном в случае изменения размера рассчитать ширину контент Div и установить ширину прикрепленным элемента к этому.

Answer 2

имел ту же проблему раз (только в БСЕ 2.3.2).

Не ответ, еще hack: Я дал прикрепленный элемент шириной. Это сосало, потому что мне нужно было установить ширину для всех разрешений (RWD), и на самом деле значение должно быть стандартной шириной столбца (например .span4).

Да: position: fixed берет элемент из заданного контекста (в вашем случае col-md-3).

Answer 3

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

Answer 4

Вот другая версия:

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

Answer 5

Вот моя версия.

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

CSS

div.affix { 
    position: fixed !important; 
} 

Answer 6

Вот мой 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}); 
}); 

Answer 7

Я использую этот код, чтобы установить ширину аффиксом ,

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

Аффикс получает ширину своего родителя и проверяет эту ширину на каждом прокрутке в Интернете. Раскомментируя последнюю строку, выполните также операцию изменения размера окна.

Answer 8

Я использовал $('.affix-element').width($('.affix-element-parent').width()).affix()

работает хорошо :)

Answer 9

Мое решение: а

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

(.Меню-карты мои липкие дел)

Я добавил это для поддержки изменения размеров окна:

Давайте предположим, что аффикс в родительском DIV # меню-карте-панели.

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