34

ブートストラップ 3.0.0 に移行していますが、左に固定されたメニューに問題があります。固定されるとすぐに (10px スクロール後)、幅が変わります。このフィドルでは小さくなり、実際のサイトでは広くなり、実際のコンテンツが拡張されます。

ブートストラップ v2.3.2 で完全に動作しました。確認したところ、リスト項目が表示されたものとうまく機能していないよう.affix {position: fixed;}です。

何か案は？

解決策：最新のコメントに基づいて、最終的にこのJSピースを追加しました。これにより、固定された要素に固定幅を設定する必要なく、うまく修正されます。

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

9 に答える 9

11

私は同じ問題を抱えていて、これで修正しました：

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

基本的にサイズ変更の場合、コンテンツ div の幅を計算し、それに固定要素の幅を設定します。

于 2013-11-30T15:29:59.687 に答える
3

別のバージョンは次のとおりです。

$('.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());
});
于 2015-10-07T13:00:47.903 に答える
1

同じ問題が 1 回ありました (BS 2.3.2 のみ)。

答えではなく、もっとハック：添付要素に幅を与えました。すべての解像度（RWD）の幅を設定する必要があり、実際には値は標準の列幅（.span4など）である必要があるため、それはひどいものでした。

はい：position: fixed指定されたコンテキストから要素を取り出します（あなたの場合col-md-3）。

于 2013-09-13T13:18:29.533 に答える
1

私の解決策も:

$('.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);
    });
});
于 2016-12-29T09:13:03.560 に答える
1

このコードを使用して接辞の幅を修正します。

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

接辞は親の幅を取得し、Web をスクロールするたびにその幅を確認します。最後の行のコメントを外して、ウィンドウのサイズ変更イベントでも実行します。

于 2016-04-30T01:04:55.020 に答える