webentwicklung-frage-antwort-db.com.de

Bootstrap 3.0-Affix mit Änderungen der Breite der Liste

Ich migriere zu Bootstrap 3.0.0 und habe Probleme mit einem angebrachten Menü auf der linken Seite: Sobald es (nach 10px-Bildlauf) angeklebt wird, ändert sich die Breite. In diese Geige wird kleiner, in meiner realen Seite wird es breiter und erweitert sich auf den tatsächlichen Inhalt.

Es hat perfekt mit Bootstrap v2.3.2 funktioniert. Nach der Überprüfung sieht es so aus, als würden die Listenelemente mit dem angezeigten .affix {position: fixed;} nicht gut abgespielt.

Irgendwelche Ideen?

LÖSUNG: Basierend auf den letzten Kommentaren habe ich dieses JS-Stück hinzugefügt, das es gut fixiert, ohne dass eine feste Breite für das angebrachte Element festgelegt werden muss:

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

Ich hatte das gleiche Problem und habe das Problem behoben:

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

grundsätzlich berechne ich im Falle einer Größenänderung die Breite des Inhalts div und stelle die Breite des angebrachten Elements ein.

11
Gokhan
$(window).scroll(function () {
    $('#secondary .widget-area.affix').width($('#secondary').width());
});
8
Builder Dan

Hier ist eine andere Version:

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

Hier ist meine Version.

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

CSS

div.affix {
    position: fixed !important;
}
3

hatte das gleiche problem einmal (nur in BS 2.3.2).

Keine Antwort, eher ein hack : Ich habe dem angefügten Element eine Breite gegeben. Das saugte, weil ich die Breite für alle Auflösungen (RWD) einstellen musste und der Wert eigentlich die Standardspaltenbreite sein sollte (z.

Ja: position: fixed nimmt das Element aus dem angegebenen Kontext heraus (in Ihrem Fall col-md-3).

1
Frank Lämmer

Ich benutze diesen Code, um die Breite des Affixes festzulegen.

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

Der Affix erhält die Breite seines Elternteils und überprüft diese Breite bei jedem Bildlauf der Bahn. Kommentieren Sie die letzte Zeile und führen Sie sie auch bei einem Fensterereignis zur Größenänderung aus.

1
Jaca Meza

Ich habe $('.affix-element').width($('.affix-element-parent').width()).affix() benutzt

Funktioniert gut :)

1
tidelake

Meine Lösung auch:

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

(.menu-card ist mein sticky div)

Ich habe dies für die Unterstützung der Fenstergröße hinzugefügt:

Nehmen wir an, der Affix befindet sich in einem übergeordneten div # -Menükartenbereich.

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

Hier ist mein 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>

Und das ist mein JS-Fix

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