5

ブートストラップを学んで公式ページの例を試していたところ、モーダルコンポーネントに（たぶん）欠陥が見つかりました。

[Launch demo modal] をクリックすると、右上隅に顕著な余白があり、モーダル ダイアログが非表示または表示されるとナビゲーション バーが伸縮します。

それはバグですか、それとも意図的なものですか？面倒だと思うのですが、どうすれば無効にできますか?

4

9 に答える 9

7

これを手動で修正するには、追加するだけです

body.modal-open, 
.modal-open .navbar-fixed-top, 
.modal-open .navbar-fixed-bottom 
{
    margin-right: 0px;
}

ブートストラップ スタイルシートの後に適用されるスタイルシートに。

スクロールバーも非表示にしたい場合は、追加できます

.modal
{
    overflow-y: auto;
}

同じように。

于 2013-09-07T05:25:17.587 に答える
2

元のページにスクロールバーが既にある場合とない場合の両方を必ずテストしてください。

これはv3.1.1でうまくいきました。

html, .modal, .modal.in, .modal-backdrop.in {
    overflow-y: auto;
}
于 2014-04-18T10:44:20.473 に答える
1

これに加えて、次のものがあることも確認してください

html { overflow-y:auto; }

スタイルシートで左シフトを停止します

于 2014-01-08T13:59:28.117 に答える
1

私もこの問題を抱えていました（ブートストラップ3.1.1）。モーダルを開いていたところ、背景 (モーダルがページの高さよりも大きい場合にスクロール バーが表示される場所) にスペースがなく、ページのコンテンツのサイズが変更され、左にシフトしていました。

私のレイアウトは固定ナビゲーションバーを使用しています。

ページのサイズ変更を防ぎ、モーダル背景が画面いっぱいになるように見えるいくつかの CSS セレクターを追加しました。

html {
    /* This prevents the page from shifting when a modal is opened e.g. search */
    overflow-y: auto;   
}
.modal,.modal.in,.modal-backdrop.in {
    /* These are to prevent the blank space for the scroll bar being displayed unless the modal is > page height */
    overflow-y: auto;
}

ページとモーダル コンテンツが画面の高さよりも大きい場合に 2 つのスクロール バーを表示できるのは少し奇妙ですが、それでも問題ありません。

于 2014-04-04T11:36:03.900 に答える
0 
body, .navbar-fixed-top, .navbar-fixed-bottom {
  margin-right: 0 !important;
}

これは私のために働いた

于 2014-05-21T10:21:52.463 に答える
0

私はAgni Pradharmaの修正を試みましたが、機能させるために少し調整する必要がありました。

私はこれを使ってそれを動かしました：

 $(document.body)
    .on('show.bs.modal', function () {
        if (this.clientHeight <= window.innerHeight) {
            return;
        }
        // Get scrollbar width
        var scrollbarWidth = getScrollBarWidth()
        if (scrollbarWidth) {
            $('.navbar-fixed-top').css('margin-right', scrollbarWidth);    
        }
    })
    .on('hide.bs.modal', function () {
        $('.navbar-fixed-top').css('margin-right', 0);
    });

    function getScrollBarWidth () {
        var inner = document.createElement('p');
        inner.style.width = "100%";
        inner.style.height = "200px";

        var outer = document.createElement('div');
        outer.style.position = "absolute";
        outer.style.top = "0px";
        outer.style.left = "0px";
        outer.style.visibility = "hidden";
        outer.style.width = "200px";
        outer.style.height = "150px";
        outer.style.overflow = "hidden";
        outer.appendChild (inner);

        document.body.appendChild (outer);
        var w1 = inner.offsetWidth;
        outer.style.overflow = 'scroll';
        var w2 = inner.offsetWidth;
        if (w1 == w2) w2 = outer.clientWidth;

        document.body.removeChild (outer);

        return (w1 - w2);
    };
于 2014-09-13T07:00:18.520 に答える
0

margin-right私の場合はうまくいきませんでしたがpadding-right、問題を解決することがわかりました。

body.modal-open {
    padding-right: 0px;
}
于 2014-08-25T22:51:28.147 に答える