web-dev-qa-db-ja.com

Twitter bootstrap 3：接辞が発火するとナビゲーションバーが幅を変更する

さて、私はbootstrap-3接辞スクリプトに関して奇妙な問題を抱えています。あなたはこれで問題を見ることができます フィドル。結果フレームを水平方向に最大化し、下にスクロールして接辞が表示されるようにしてください。ご覧のとおり、右側でナビゲーションバーが増加しており、この効果の理由はまったくわかりません。 addngで一時的に問題を解決しました

 .container
{
padding-left: 0px;
padding-right: 0px;
}

cssに。しかし、ご覧のとおり、あまりきれいではないので、これらのパディングを削除したくありません。または、次のように静的な幅を設定できます。

width: 1140px;

に ＃nav.affix。しかし、これはあまり反応が良くありません...私は実際に多くのアプローチを試しましたが、満足のいく結果を得ることができませんでした。何が原因なのか知っていますか？

編集

さて、Chromeのデバッガーは私にさらなる情報を与えます：接辞が起動される前に、nav-elementはとりわけクラス 'affix-top'を取得しました（htmlソースではなくchrome-debuggerから抽象化されています！）：

<nav id="nav" class="navbar navbar-default affix-top" role="navigation" data-spy="affix" data-offset-top="133" style="background-color: yellow">

不思議なことに、affix-topはHTMLコードで宣言されていません。それでも、＃nav.nav.navbar.navbar-default-affix-topのサイズは次のようになります。 1140px x 52px。

enter image description here

スクロールして接辞が発行されると、クラス「affix-top」は「affix」に変わり、「affix」のサイズは次のようになります。 1170px x 52px。

enter image description here

これらは30pxで、ナビゲーションバーは右に大きくなります。しかし、どうすればそれを止めることができますか？とりわけ、csvファイルでクラスaffix-topが見つかりません...

csstwitter-bootstrapwidthnavbaraffix
15
Dong3000

あなたはそれを解決することはできません。問題はposition: fixed;です。ナビゲーションバーは、leftまたはrightプロパティなしでブラウザによってレンダリングされます。

この問題を解決できるのは、次の3つだけです。

1。絶対位置決めを使用します。

position: absolute;を使用し、jQueryでスクロールするときにtop値を変更します。欠点：そのためにはJavascriptパーツが必要です。

2。左/右に設定

left: ?px;またはright: ?pxを設定します

。特別な幅を定義する

メディアクエリごとにmin-width: ?px;および/またはmax-width: ?px;を設定します

9
Adrian Preuss

私が接辞クラスに100％の最小幅を与えたとき、それは私のために働きました。レスポンシブでも動作します。

4
Florian Fischer

確認できません

最小幅：100％

私のために働いた。親divのinnerWidthを使用してこの問題を解決しました。次の例（1つの列が含まれています-もちろん、コンテナと行に配置する必要があります...）：

<div class="col-sm-3 col-lg-2">
  <div class="sidebar">
    <div class="panel-heading">Some Title</div>
       <div class="panel-body">
         Some Content
       </div>
    </div>
  </div>
</div>

JSに続いて、「affix.bs.affix」の最初の出現時にwidthプロパティを設定します。また、サイズ変更イベントにハンドラーを追加することで、ウィンドウのサイズ変更もキャッチされるようにしました。

  //Applied affix to sidebar class
  $('.sidebar').affix({
        offset: {
            top: 0
        }
    }).on('affix.bs.affix',function(){
        setAffixContainerSize();
    });

    /*Setting the width of the sidebar (I took 10px of its value which is the margin between cols in my Bootstrap CSS*/
    function setAffixContainerSize(){
        $('.sidebar').width($('.sidebar').parent().innerWidth()-10);
    }

    $(window).resize(function(){
        setAffixContainerSize();
    });

楽しい。

2
Mike