css सूची के साथ बूटस्ट्रैप 3.0 affix चौड़ाई बदलता है




twitter-bootstrap twitter-bootstrap-3 (8)

मैं बूटस्ट्रैप 3.0.0 में माइग्रेट कर रहा हूं और मुझे बाईं ओर एक एफ़िक्स्ड मेनू के साथ समस्याएं आ रही हैं: जैसे ही यह संलग्न हो जाता है (10px स्क्रॉल के बाद), इसकी चौड़ाई बदल जाती है। इस पहेली में यह छोटा हो जाता है, मेरी असली साइट में यह व्यापक हो जाता है और वास्तविक सामग्री पर फैलता है।

यह बूटस्ट्रैप v2.3.2 के साथ पूरी तरह से काम किया। यह जांचने के बाद ऐसा लगता है कि सूची आइटम .affix {position: fixed;} साथ अच्छी तरह से नहीं खेलते हैं।

कोई विचार?

समाधान: नवीनतम टिप्पणियों के आधार पर मैंने अंत में यह जेएस टुकड़ा जोड़ा है जो इसे चिपकने वाले तत्व को निश्चित चौड़ाई निर्धारित किए बिना अच्छी तरह से ठीक करता है:

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

मैंने $('.affix-element').width($('.affix-element-parent').width()).affix()

अच्छा काम करता है :)


मैं प्रत्यय की चौड़ाई को ठीक करने के लिए इस कोड का उपयोग करता हूं।

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

एफ़िक्स को अपने माता-पिता की चौड़ाई मिलती है और वेब पर प्रत्येक स्क्रॉल पर चौड़ाई की जांच करें। अंतिम पंक्ति को अपूर्ण करना, आकार बदलें विंडो ईवेंट पर भी निष्पादित करें।


एक बार एक ही समस्या थी (केवल बीएस 2.3.2 में)।

कोई जवाब नहीं, एक हैक : मैंने एफ़िक्स्ड तत्व को चौड़ाई दी। वह चूसा, क्योंकि मुझे सभी संकल्पों (आरडब्ल्यूडी) के लिए चौड़ाई निर्धारित करनी थी और वास्तव में मान मानक कॉलम चौड़ाई (उदाहरण के लिए। एसपी 4) होना चाहिए।

हां: position: fixed संदर्भ को दिए गए संदर्भ से बाहर ले जाता है (आपके मामले में col-md-3 )।


मुझे एक ही समस्या थी और इसके साथ तय किया गया था:

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

मूल रूप से आकार बदलने की स्थिति में मैं सामग्री div की चौड़ाई की गणना करता हूं और उसमें चिपकने वाले तत्व की चौड़ाई निर्धारित करता हूं।


यहां एक और संस्करण है:

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

मेरा एचटीएमएल यहाँ है

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

और यह मेरा जेएस फिक्स है

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

मेरा समाधान भी:

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

(.मेनू-कार्ड मेरा चिपचिपा div है)

मैंने विंडो आकार बदलने का समर्थन करने के लिए इसे जोड़ा:

आइए मान लें कि प्रत्यय माता-पिता div # मेनू-कार्ड-फलक में हैं।

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

मेरा संस्करण यहाँ है।

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

सीएसएस

div.affix {
    position: fixed !important;
}






affix