Bootstrap 3.0 gắn với thay đổi danh sách width

Question

Tôi đang di chuyển sang bootstrap 3.0.0 và tôi đang gặp vấn đề với menu được gắn ở bên trái: ngay sau khi nó được dán (sau khi cuộn 10px), chiều rộng của nó thay đổi. Trong this fiddle nó trở nên nhỏ hơn, trong trang web thực của tôi, nó trở nên rộng hơn và mở rộng trên nội dung thực tế.

Nó hoạt động hoàn hảo với bootstrap v2.3.2. Sau khi kiểm tra, có vẻ như các mục danh sách không hoạt động tốt với số .affix {position: fixed;} xuất hiện.

Bất kỳ ý tưởng nào?

SOLUTION: dựa trên những ý kiến ​​mới nhất cuối cùng tôi đã thêm này JS mảnh mà sửa chữa nó độc đáo mà không cần phải thiết lập chiều rộng cố định vào các yếu tố gắn liền với:

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

Answer 1

tôi đã cùng một vấn đề và cố định với điều này:

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

cơ bản trong một sự kiện của thay đổi kích cỡ tôi có thể tính chiều rộng div nội dung và thiết lập độ rộng của yếu tố gắn liền với điều đó.

Answer 2

có cùng một vấn đề một lần (chỉ trong BS 2.3.2).

Không phải là câu trả lời, thêm hack: Tôi đã cho phần tử được gắn rộng một chiều rộng. Điều đó bị hút, bởi vì tôi phải đặt chiều rộng cho tất cả các độ phân giải (RWD) và thực sự giá trị phải là chiều rộng cột tiêu chuẩn (ví dụ: .span4).

Có: position: fixed lấy phần tử ra khỏi ngữ cảnh đã cho (trong trường hợp của bạn là col-md-3).

Answer 3

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

Answer 4

Dưới đây là một phiên bản khác:

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

Dưới đây là phiên bản của tôi.

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

Đây là HTML của tôi

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

Và đây là JS tôi sửa chữa

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

tôi sử dụng mã này để sửa chiều rộng của đóng .

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

Khớp có chiều rộng của cha mẹ và kiểm tra chiều rộng đó trên mỗi cuộn web. Bỏ ghi chú dòng cuối cùng, thực hiện quá trên sự kiện thay đổi kích thước cửa sổ.

Answer 8

tôi đã sử dụng $('.affix-element').width($('.affix-element-parent').width()).affix()

Hoạt động tốt :)

Answer 9

Giải pháp của tôi cũng như:

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

(.menu-thẻ div dính của tôi)

tôi thêm này để hỗ trợ thay đổi kích thước cửa sổ:

Giả sử đóng đang ở trong một mẹ div # menu-thẻ-pane.

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