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




twitter-bootstrap twitter-bootstrap-3 (6)

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

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

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

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

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

कोई विचार?

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

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

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

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

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


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

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

सीएसएस

div.affix {
    position: fixed !important;
}

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

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

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

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


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

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




affix