Bootstrap 3.0 ต่อท้ายด้วยรายการเปลี่ยนความกว้าง

ฉันกำลังย้ายไปยัง bootstrap 3.0.0 และฉันมีปัญหากับเมนูที่ติดอยู่ทางด้านซ้าย: ทันทีที่เมนูติดอยู่ (หลังจากเลื่อนไป 10px) ความกว้างของเมนูก็จะเปลี่ยนไป ในซอนี้ มันเล็กลง ในเว็บไซต์จริงของฉัน มันจะกว้างขึ้นและขยายเนื้อหาจริงออกไป

มันทำงานได้อย่างสมบูรณ์แบบกับ bootstrap v2.3.2 หลังจากตรวจสอบแล้ว ดูเหมือนว่ารายการเล่นได้ไม่ดีนักกับ .affix {position: fixed;} ที่ปรากฏขึ้น

มีความคิดอะไรบ้าง?

วิธีแก้ไข: จากความคิดเห็นล่าสุด ในที่สุดฉันก็ได้เพิ่มชิ้นส่วน JS นี้ซึ่งแก้ไขได้อย่างดีโดยไม่ต้องตั้งค่าความกว้างคงที่ให้กับองค์ประกอบที่ติดอยู่:

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

css twitter-bootstrap twitter-bootstrap-3 affix
person Davor    schedule 08.09.2013    source แหล่งที่มา
comment
จริงๆ แล้วมันมีพฤติกรรมเหมือนกันโดยไม่มีรายการ (เช่น องค์ประกอบของฟอร์ม เป็นต้น)   -  person Davor    schedule 08.09.2013
comment
ปัญหาความกว้างของ Affix และการแก้ไขบางอย่าง หากใครสนใจ   -  person Sisir    schedule 21.11.2013
comment
@Sisir เจ๋งมากขอบคุณ! ในที่สุดฉันก็สามารถลบการแฮ็กออกจากโค้ดของฉันได้และมีวิธีแก้ปัญหาที่เหมาะสม (หวังว่าพวกเขาจะเพิ่มมันลงในเวอร์ชัน 3.1)   -  person Davor    schedule 22.11.2013

คำตอบ (8)


arrow_upward
11
arrow_downward

ฉันมีปัญหาเดียวกันและแก้ไขด้วยสิ่งนี้:

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

โดยทั่วไปในกรณีของการปรับขนาด ฉันจะคำนวณความกว้างของ div เนื้อหา และตั้งค่าความกว้างขององค์ประกอบที่ติดอยู่

person Gokhan Demirhan    schedule 30.11.2013
comment
เฉพาะเหตุการณ์การปรับขนาดเท่านั้นที่ใช้ไม่ได้สำหรับฉัน (Primefaces/Bootsfaces) แต่การใช้เหตุการณ์การเลื่อน (ด้านล่างวิธีแก้ปัญหา) ก็ช่วยได้ - person tak3shi; 10.01.2016

arrow_upward
3
arrow_downward

นี่คือเวอร์ชันอื่น:

$('.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());
});
person alex_wdmg    schedule 07.10.2015

arrow_upward
3
arrow_downward

นี่คือเวอร์ชันของฉัน

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

ซีเอสเอส

div.affix {
    position: fixed !important;
}
person Ronald Veenbrink    schedule 20.03.2016

arrow_upward
1
arrow_downward

มีปัญหาเดียวกันหนึ่งครั้ง (เฉพาะใน BS 2.3.2)

ไม่ใช่คำตอบ แต่เป็น แฮ็ค มากกว่า: ฉันให้ความกว้างแก่องค์ประกอบที่ติดอยู่ แย่มากเพราะฉันต้องตั้งค่าความกว้างสำหรับความละเอียดทั้งหมด (RWD) และจริงๆ แล้วค่าควรเป็นความกว้างของคอลัมน์มาตรฐาน (เช่น .span4)

ใช่: position: fixed นำองค์ประกอบออกจากบริบทที่กำหนด (ในกรณีของคุณ col-md-3)

person Frank Lämmer    schedule 13.09.2013
comment
ขอบคุณ - มันใช้งานได้ แต่เป็นแฮ็คที่ค่อนข้างน่ากลัวที่มีการสืบค้นสื่อมากมายเพื่อให้ตอบสนองได้... หวังว่า Bootstrap จะแก้ไขมันได้ในบางจุด! - person Davor; 14.09.2013

arrow_upward
1
arrow_downward

ฉันใช้รหัสนี้เพื่อแก้ไขความกว้างของส่วนต่อท้าย

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

ส่วนขยายจะได้รับความกว้างของพาเรนต์และตรวจสอบความกว้างนั้นในทุก ๆ การเลื่อนเว็บ ไม่แสดงข้อคิดเห็นในบรรทัดสุดท้าย ให้ดำเนินการกับเหตุการณ์หน้าต่างปรับขนาดด้วย

person Jaca Meza    schedule 30.04.2016

arrow_upward
1
arrow_downward

ฉันใช้ $('.affix-element').width($('.affix-element-parent').width()).affix()

ทำได้ดี :)

person tidelake    schedule 28.09.2016

arrow_upward
1
arrow_downward

โซลูชันของฉันเช่นกัน:

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

(.menu-card คือ div เหนียวของฉัน)

ฉันเพิ่มสิ่งนี้เพื่อรองรับการปรับขนาดหน้าต่าง:

สมมติว่าส่วนต่อท้ายอยู่ใน div พาเรนต์ #menu-card-pane

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

arrow_upward
0
arrow_downward

นี่คือ 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});
});
person Ali Lane    schedule 02.04.2016