Dodatek Bootstrap 3.0 z listą zmienia szerokość

Question

Przeprowadzam migrację do wersji bootstrap 3.0.0 i mam problemy z umieszczonym menu po lewej stronie: gdy tylko zostanie on umieszczony (po przewinięciu 10 pikseli), zmienia się jego szerokość. W this fiddle jest on mniejszy, w mojej prawdziwej witrynie jest szerszy i rozszerza się na rzeczywistą zawartość.

To działało idealnie z bootstrap v2.3.2. Po sprawdzeniu wygląda na to, że elementy listy nie grają dobrze z wyświetlonym .affix {position: fixed;}.

Wszelkie pomysły?

ROZWIĄZANIE: w oparciu o najnowsze komentarze I wreszcie dodanych w tym JS kawałek który naprawia go ładnie bez konieczności zakładania stałej szerokości do przytwierdzonej element:

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

Answer 1

miałem ten sam problem i utrwalano w tym:

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

zasadzie w przypadku zmiany rozmiaru obliczyć szerokość zawartości div i ustawić szerokość elementu przytwierdzonej do tego.

Answer 2

miał ten sam problem raz (tylko w BS 2.3.2).

Brak odpowiedzi, więcej hack: Nadałem elementowi przytwierdzoną szerokość. To wciągnęło, ponieważ musiałem ustawić szerokość dla wszystkich rozdzielczości (RWD), a faktycznie wartość powinna być standardową szerokością kolumny (na przykład .span4).

Tak: position: fixed przenosi element z podanego kontekstu (w twoim przypadku col-md-3).

Answer 3

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

Answer 4

Oto kolejna wersja:

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

Oto moja wersja.

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

Tu jest mój 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> 

a to mój JS naprawić

$(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

używam tego kodu, aby ustalić szerokość przydomkiem .

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

Przystawka pobiera szerokość swojego rodzica i sprawdza szerokość na każdym przewinięciu strony. Odkomentuj ostatni wiersz, wykonaj także w przypadku zmiany rozmiaru okna.

Answer 8

użyłem $('.affix-element').width($('.affix-element-parent').width()).affix()

działa dobrze :)

Answer 9

moje rozwiązanie, a także:

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

(.Karta menu jest mój lepki div)

dodałem to do wspomagania zmiany rozmiaru okna:

Załóżmy, że przyrostek są w dominującym div # menu-card-panelu.

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