Modem Bootstrap ma wadę

Question

Podczas uczenia się bootstrapu i wypróbowywania przykładu na oficjalnej stronie, znalazłem wadę (być może) ze składnikiem modal.

Kliknij przycisk "Uruchom moduł demo", zauważysz, że w górnym prawym rogu widoczny jest wyraźny margines, a pasek nawigacji ulegnie rozciągnięciu/zmniejszeniu, gdy okno dialogowe modalne zniknie/pojawi się.

Czy to błąd, czy celowo? Myślę, że to denerwujące, Jak to wyłączyć?

Answer 1

Aby rozwiązać ten problem po prostu ręcznie dodać

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

do arkusza stylów, który jest stosowany po stylów startowej.

Jeśli chcesz, aby ukryć pasek przewijania, a także można dodać

.modal 
{ 
    overflow-y: auto; 
} 

również.

Answer 2

oprócz tego także upewnić się, że następujące

html { overflow-y:auto; }

w arkuszu stylów go zatrzymać przesuwanie w lewo

Answer 3

jest to zgłaszane problem bootstrap: https://github.com/twbs/bootstrap/issues/9855

I to jest moja tymczasowa szybka naprawa i działa przy użyciu fixed top navbar, tylko przy użyciu javascript. Załaduj ten skrypt razem ze swoją stroną.

$(document.body) 
.on('show.bs.modal', function() { 
    if (this.clientHeight <= window.innerHeight) { 
     return; 
    } 
    // Get scrollbar width 
    var scrollbarWidth = getScrollBarWidth() 
    if (scrollbarWidth) { 
     $(document.body).css('padding-right', scrollbarWidth); 
     $('.navbar-fixed-top').css('padding-right', scrollbarWidth);  
    } 
}) 
.on('hidden.bs.modal', function() { 
    $(document.body).css('padding-right', 0); 
    $('.navbar-fixed-top').css('padding-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); 
}; 

Oto przykład praca: http://jsbin.com/oHiPIJi/64

Answer 4

miałem tego problemu, jak również (bootstrap 3.1.1). Otworzyłem modal i na tle brakowało miejsca (gdzie pojawi się pasek przewijania, jeśli modalny jest większy niż wysokość strony), a zawartość strony zmieniła rozmiar i przesunęła się w lewo.

Mój układ wykorzystuje stały pasek nawigacyjny.

dodałem kilka selektorów CSS, który wydaje się uniemożliwić zmianę rozmiaru strony i zapewnienie, że modal-tło wypełnia ekran

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; 
} 

nadal uważają, że jest to nieco dziwne, gdzie można mieć dwa paski przewijania, jeżeli strona i zawartość modalna jest większa niż wysokość ekranu, ale mogę z tym żyć.

Answer 5

Pamiętaj, aby przetestować zarówno w przypadku, gdy strona pierwotna ma już pasek przewijania i nie ma jeszcze paska przewijania.

To zadziałało dla mnie z v3.1.1.

html, .modal, .modal.in, .modal-backdrop.in { 
    overflow-y: auto; 
} 

Answer 6

body, .navbar-fixed-top, .navbar-fixed-bottom { 
    margin-right: 0 !important; 
} 

ten pracował dla mnie

Answer 7

margin-right nie działa w moim przypadku, znalazłem padding-right aby rozwiązać ten problem.

body.modal-open { 
    padding-right: 0px; 
} 

Answer 8

Próbowałem Agni Pradharma „s poprawki, ale musiał nieco dostosować go, aby to działało.

mam to działa przy użyciu to:

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

Answer 9

jest to najlepsze rozwiązanie znalazłem:

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom { 
    padding-right: 0px !important; 
    overflow-y: auto; 
}