web-dev-qa-db-ja.com

Bootstrap 3.0リストの幅が変わる接辞

bootstrap 3.0.0に移行しています。左側に貼り付けられたメニューに問題があります：貼り付けられた直後（10pxスクロール後）に、幅が変更されます。In- このフィドル 小さくなりますが、実際のサイトでは幅が広くなり、実際のコンテンツが拡大されます。

bootstrap v2.3.2で問題なく動作しました。確認したところ、表示された.affix {position: fixed;}でリスト項目がうまく機能しないようです。

何か案は？

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

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

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

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

基本的にサイズ変更のイベントでは、コンテンツのdivの幅を計算し、添付された要素の幅をそれに設定します。

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

ここに別のバージョンがあります：

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

これが私のバージョンです。

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

CSS

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

同じ問題が一度ありました（BS 2.3.2のみ）。

答えではなく、もっとa hack：貼り付けた要素に幅を与えました。私はすべての解像度（RWD）の幅を設定する必要があり、実際には値は標準の列幅（たとえば、。

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

1
Frank Lämmer

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

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

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

1
Jaca Meza

$('.affix-element').width($('.affix-element-parent').width()).affix()を使用しました

うまくいく:)

1
tidelake

私の解決策：

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

これが私の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});
});
0
Ali Lane