Pembubuhan bootstrap 3.0 dengan lebar daftar berubah

Saya bermigrasi ke bootstrap 3.0.0 dan saya mengalami masalah dengan menu yang ditempel di sebelah kiri: segera setelah ditempel (setelah gulir 10px), lebarnya berubah. Di biola ini ia menjadi lebih kecil, di situs saya yang sebenarnya ia menjadi lebih luas dan memperluas konten sebenarnya.

Ini bekerja sempurna dengan bootstrap v2.3.2. Setelah dicek sepertinya item daftar tidak cocok dengan .affix {position: fixed;} yang muncul.

Ada ide?

SOLUSI: berdasarkan komentar terbaru saya akhirnya menambahkan bagian JS ini yang memperbaikinya dengan baik tanpa harus mengatur lebar tetap pada elemen yang ditempelkan:

$(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 sumber
comment
Sebenarnya ia memiliki perilaku yang sama tanpa daftar (dengan elemen formulir misalnya)   -  person Davor    schedule 08.09.2013
comment
Masalah lebar imbuhan dan beberapa perbaikan jika ada yang tertarik.   -  person Sisir    schedule 21.11.2013
comment
@Sisir keren sekali, terima kasih! Saya akhirnya dapat menghapus peretasan dari kode saya dan mendapatkan solusi yang tepat (mudah-mudahan mereka akan menambahkannya ke v3.1)   -  person Davor    schedule 22.11.2013

Jawaban (8)


arrow_upward
11
arrow_downward

Saya memiliki masalah yang sama dan memperbaikinya:

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

pada dasarnya jika terjadi perubahan ukuran saya menghitung lebar div konten dan mengatur lebar elemen yang ditempelkan ke sana.

person Gokhan Demirhan    schedule 30.11.2013
comment
Hanya acara pengubahan ukuran yang tidak berfungsi untuk saya (Primefaces/Bootsfaces). Tetapi menggunakan acara gulir (solusi di bawah) berhasil. - person tak3shi; 10.01.2016

arrow_upward
3
arrow_downward

Ini versi lainnya:

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

Ini versi saya.

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

CSS

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

arrow_upward
1
arrow_downward

mengalami masalah yang sama satu kali (hanya di BS 2.3.2).

Bukan jawaban, lebih merupakan retas: Saya memberi lebar pada elemen yang ditempelkan. Itu menyebalkan, karena saya harus mengatur lebar untuk semua resolusi (RWD) dan sebenarnya nilainya harus lebar kolom standar (mis. .span4).

Ya: position: fixed mengeluarkan elemen dari konteks yang diberikan (dalam kasus Anda col-md-3).

person Frank Lämmer    schedule 13.09.2013
comment
Terima kasih - ini berhasil tetapi peretasan yang cukup buruk dengan banyak pertanyaan media untuk membuatnya responsif... Semoga Bootstrap menambalnya suatu saat nanti! - person Davor; 14.09.2013

arrow_upward
1
arrow_downward

Saya menggunakan kode ini untuk memperbaiki lebar imbuhan.

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

Afiks mendapatkan lebar induknya dan memeriksa lebar tersebut pada setiap gulir web. Membatalkan komentar pada baris terakhir, jalankan juga pada acara pengubahan ukuran jendela.

person Jaca Meza    schedule 30.04.2016

arrow_upward
1
arrow_downward

Saya menggunakan $('.affix-element').width($('.affix-element-parent').width()).affix()

Bekerja dengan baik :)

person tidelake    schedule 28.09.2016

arrow_upward
1
arrow_downward

Solusi saya juga:

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

(.menu-card adalah div lengket saya)

Saya menambahkan ini untuk mendukung pengubahan ukuran jendela:

Anggaplah afiksnya ada di div induk #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

Ini HTML saya

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

Dan ini adalah perbaikan JS saya

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