Twitter Bootstrap modal толкает содержимое html влево

Ответ 1

Для загрузочного буфера 3.x.x.

Я нашел решение, которое работает с 100% CSS и без JavaScript.

Трюк состоит в том, чтобы показать полосу прокрутки для модальной над полосой прокрутки html-содержимого.

CSS

html {
  overflow: hidden;
  height: 100%;
}
body {
  overflow: auto;
  height: 100%;
}

/* unset bs3 setting */
.modal-open {
 overflow: auto; 
}

Вот пример онлайн: http://jsbin.com/oHiPIJi/43/

Я тестирую его на Windows 7 с помощью:

• FireFox 27.0
• Chrome 32.0.1700.107 м
• IE 11 в режиме браузера 8, 9, 10, Edge (Desktop)
• IE 11 в режиме браузера 8, 9, 10, Edge (телефон Windows)

Несколько новых проблем, которые я мог бы найти в IE:

В IE есть фоновая (= body) прокрутка с помощью колеса мыши, если больше нечего прокручивать на переднем плане.

Уход за position:fixed!

Из-за характера этого обходного пути вам нужна дополнительная забота о фиксированных элементах. Например, для дополнения "navbar fixed" необходимо установить значение html, а не body (как описано в файле начальной загрузки).

/* only for fixed navbar: 
* extra padding stetting not on "body" (like it is described in doc), 
* but on "html" element
* the used value depends on the height of your navbar
*/
html {
  padding-top: 50px;
  padding-bottom: 50px;
}

альтернатива с оберткой

Если вам не нравится набор overflow:hidden на html (некоторые люди этого не хотят, но он работает, действителен и соответствует 100% стандарту), вы можете обернуть содержимое body дополнительным дела.

Чем вам не нужна дополнительная помощь для фиксированных элементов, вы можете использовать его, как раньше.

body, html {
  height: 100%;
}
.bodywrapper {
  overflow: auto;
  height: 100%;
}

/* unset bs3 setting */
.modal-open {
 overflow: auto; 
}

/* extra stetting for fixed navbar, see bs3 doc
*/
body {
  padding-top: 50px;
  padding-bottom: 50px;
}

вот пример: http://jsbin.com/oHiPIJi/47/

Update:

Проблемы в Bootstrap:

• # 12627
• # 9855

Обновление 2: FYI

В Bootstrap 3.2.0 они добавляют обходное решение для modal.js, которые пытаются обрабатывать проблемы с Javascript для каждого вызова modal.prototype.show(), Modal.prototype.hide() и Modal.prototype.resize(). Они добавляют для этого 7 (!) Новых методов. Теперь ок. 20% кода от modal.js пытается решить только эти проблемы.

Ответ 2

Попробуйте следующее:

body.modal-open {
    overflow: auto;
}
body.modal-open[style] {
    padding-right: 0px !important;
}

.modal::-webkit-scrollbar {
    width: 0 !important; /*removes the scrollbar but still scrollable*/
    /* reference: http://stackoverflow.com/a/26500272/2259400 */
}

Ответ 3

На самом деле это вызвано следующим правилом в bootstrap.css:

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

Я не совсем уверен, почему он ведет себя так (возможно, для учета полосы прокрутки каким-то образом), но вы можете изменить поведение следующим образом:

body.modal-open {margin-right: 0px}

EDIT: На самом деле, это проблема, связанная с загрузкой: https://github.com/twbs/bootstrap/issues/9855

Ответ 4

Здесь исправление, предложенное user yshing, которое действительно FIXED для меня при использовании Bootstrap v3.1.1 и Google Chrome 35.0.1916.114m. Исправление исходит из GitHub issue thread по этому вопросу:

.modal
{
    overflow-y: auto;
}

.modal-open
{
   overflow:auto;
   overflow-x:hidden;
}

Исправление будет помещено только в Bootstrap 3.2 как отброшено mdo.

Ответ 5

Когда модель открывается, прокладка 17px справа от тела. Код, приведенный ниже, должен решить эту проблему.

body {
padding-right: 0px !important;
}

Ответ 6

Чтобы предотвратить смещение страницы в похожих экземплярах - например, открытие аккордеона, которое проходит мимо нижней части страницы, я добавляю это в CSS:

body {
    overflow-y: scroll;
    height: 100%;
}

overflow-y: scroll заставляет полосу прокрутки отображаться все время. Честно говоря, я не могу вспомнить, почему я положил туда height:100%... но вы, похоже, не требуете этого для этой проблемы.

Демо: http://jsfiddle.net/jxX6A/8/

Есть еще небольшое движение. Но это похоже на страницу примера Bootstrap: http://getbootstrap.com/javascript/#modals

Итак, я предполагаю, что вы застряли с ним... но это все еще намного лучше, чем вы видели вначале.

EDIT: Я могу быть обеспокоен тем, что добавление этих стилей будет мешать другим материалам Bootstrap, поскольку я не использовал его сам, поэтому вы можете дважды проверить его.

Ответ 7

Вы просто редактируете .modal-open class form bootstrap.min.css файл, я худею, это будет ОК .modal-open{overflow:auto}

Поток: скрытый установлен там, вы просто устанавливаете over-flow: auto.

Ответ 8

Я столкнулся с такой же проблемой и последующим решением

.modal-open {
    overflow: visible;
}

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

Ответ 9

С момента бутстрапа 3.3.6 многое изменилось, поэтому вышеприведенные решения могут быть недостаточными.

Чтобы решить эту проблему, посмотрите на функцию setScrollbar в bootstrap.js(или bootstrap-min.js, конечно), вы сразу заметите, что bootstrap добавляет padding-right к элементу body, устанавливая его значение в отработанное значение of scrollbarWidth плюс существующий padding-right на теле (или 0, если нет).

Если вы прокомментируете ниже

//this.$body.css('padding-right', bodyPad + this.scrollbarWidth)

В вашем css переопределите загрузочный модально-открытый класс с ниже

.modal-open{
  overflow:inherit;
 }

Люди предложили overflow-y: scroll;, проблема в том, что ваш контент сдвигается, если полоса прокрутки не существует в первую очередь.

NB Согласно http://getbootstrap.com/javascript/#modals, всегда старайтесь поместить модальный код HTML в позицию верхнего уровня в документе

Ответ 10

Нашел этот ответ в проблемах с туберкулезом

просто добавив это ниже css, что небольшое движение будет зафиксировано

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

Кредиты https://github.com/tvararu

Ответ 11

Я использую Bootstrap v3.3.4 и вижу эту проблему, я понял, что Bootstrap modal добавляет дополнение 17px прямо к телу, поэтому просто используйте следующий код:

body {
    padding-right: 0 !important;
}

Ответ 12

Никакого решения здесь не было исправлено. Но после Css, который я получил от Гитуба, работал на меня.

body.modal-open {
padding-right: 0px !important;
overflow-y: auto;
}

Ответ 13

Просто сделайте это просто, и все это

.modal-open {
padding-right: 0 !important;
}

Работает для меня. Короткая и выполняет эту работу.

Ответ 14

Это ошибка для начальной загрузки: https://github.com/twbs/bootstrap/issues/9855

И это мое временное быстрое исправление, и оно работает с использованием фиксированной верхней панели навигации, только с помощью javascript. Загрузите этот script вместе со своей страницей.

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

Вот рабочий пример: http://jsbin.com/oHiPIJi/64

Ответ 15

Просто добавьте класс

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

это сработало для меня

Ответ 16

У меня такая же проблема, и у меня есть решение, которое работает для меня....

body .modal-open {
  padding-right: 0% !important;
  overflow-y: auto;
}

поместите этот код поверх своего style.css файла

Ответ 17

У меня столкнулась с такой же проблемой, и для меня работает следующее решение

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

Ответ 18

Попробуйте изменить все происшествия ниже

$body.css('padding-right',XXX)

с

$body.css('padding-right'0)

в файле bootstrap.js.

Что все..

Ответ 19

Итак, получается, что на самом деле я получаю правую границу в 250 пикселей или около того. Моя проблема, похоже, заключалась в том, что .modal-open становился на место: исправлено, и это было причиной по любой причине. Поэтому в моем случае исправление было аналогичным, но я установил значение позиции по умолчанию, как показано ниже:

.modal-open{ position: initial !important;}

Ответ 20

Я исправил свою проблему, и я думаю, что она будет работать для всех. В bootstrap.js есть строка:

if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)

Это означает, что в некоторых случаях Bootstrap добавит пробел справа от ширины полосы прокрутки при открытии модального. Итак, @pmanOnu был на полпути, но не удаляйте всю строку кода, но только

замените bodyPad + this.scrollbarWidth на bootstrap.js с помощью 0

чтобы сделать Bootstrap добавлением правого ввода 0px (что то же самое не для добавления).

Затем добавьте .modal-open {overflow: initial;} в свой собственный css, чтобы не допустить, чтобы Bootstrap отключил полосу прокрутки при открытии модалов.

Ответ 21

Если все вышеупомянутые решения не сработали, возможно, это связано с позиционированием содержимого. Просто взгляните на положение модального

body.modal-open
{
   padding-right: 0 !important; // not important
   position: relative;
}

Ответ 22

Для тех, кто все еще борется с этим - последняя версия Bootstrap имеет собственное исправление. Просто обновите файлы bootstrap.min.css и bootstrap.min.js с последней версии.

http://getbootstrap.com/

Ответ 23

Мне действительно не понравилось ни одно из предоставленных решений, и использовал их комбинацию (наряду с исправлением, которое я ранее имел для модальных моделей qTip), чтобы придумать что-то, что лучше всего подходит для меня с Bootstrap v3.3.7.

ОБНОВЛЕНИЕ: Устранена проблема с фиксированным позиционированием navbar на iOS.

CSS

/* fix issue with scrollbars and navbar fixed movement issue with bootstrap modals */
html {
    overflow-y: scroll !important;
}

html.noscroll {
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
}

.modal-open .modal {
    padding-right: 0 !important;
}

.modal-open[style] {
    padding-right: 0px !important;
}

.modal::-webkit-scrollbar {
    width: 0 !important; /*removes the scrollbar but still scrollable*/
}
/* end modal fix */

JavaScript:

/* fix for modal overlay scrollbar issue */
$(document).ready(function() {
    var curScrollTop;
    var prevScrollTop;
    $('.modal').on('show.bs.modal', function() {
        curScrollTop = $(window).scrollTop();
        $('html').addClass('noscroll').css('top', '-' + curScrollTop + 'px');
        $('.navbar-fixed-top').css({'position':'absolute','top':curScrollTop});     
        $(window).on("resize", function() {             
            var bodyH = $("body").height();
            var winH = $(window).height();
            if (winH > bodyH) {
                prevScrollTop = curScrollTop;
                curScrollTop = 0;
                $('.navbar-fixed-top').css({'position':'absolute','top':'0'}); 
            }
            else {
                $('html').removeClass("noscroll");
                if (curScrollTop == 0) window.scrollTo(0, prevScrollTop);
                else window.scrollTo(0, curScrollTop);
                curScrollTop = $(window).scrollTop(); 
                $('.navbar-fixed-top').css({'position':'absolute','top':curScrollTop});  
                $('html').addClass("noscroll");
            }
            $('html').css('top', '-' + curScrollTop + 'px');
        })
    })
    $('.modal').on('hide.bs.modal', function() {
        $('html').removeClass("noscroll");
         $('.navbar-fixed-top').css({'position':'fixed','top':'0'});
        window.scrollTo(0, curScrollTop);
        $(window).off("resize");
    })
})

Это позволяет фону быть "фиксированным", но все же позволяет прокручивать модалы, разрешает проблему двойной полосы прокрутки и перепозиционирование фиксированной навигационной панели.

Обратите внимание, что там есть дополнительный код, чтобы запомнить положение "прокрутки" (и вернуться к нему), когда модаль закрыт.

Надеюсь, это поможет любому, кто хочет достичь того, что я собираюсь после.

Ответ 24

Я нашел ответ Агни Прадхармы, работающий на меня; однако не полностью в Chrome.

Похоже, что полоса прокрутки документа шире, чем другие полосы прокрутки элементов; поэтому я отредактировал функцию getScrollBarWidth.

Он просто сначала проверяет ширину; удаляет панель прокрутки документа; затем сравнивает разницу. Это также намного меньше кода.

$(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 fwidth = $(document).width();
    $('html').css('overflow-y', 'hidden');
    var swidth = $(document).width();
    $("html").css("overflow-y", "visible");
    return (swidth - fwidth);
};

Ответ 25

Вот то, что я использовал, будет работать на 100% в Bootstrap 3.2.0, если вы не против форсирования полос прокрутки.

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: scroll;
}

Ответ 26

лучший способ: добавить к BODY overflow-y: scroll

и удалить 4 функции из bootstrap.js -

 checkScrollbar
 setScrollbar
 resetScrollbar
 measureScrollbar

Ответ 27

Для меня это прекрасно работает, как это

 .modal-open .modal {
  overflow-x: scroll;
  overflow-y: scroll;
}

Ответ 28

Для меня, похоже, работает - протестировано в Firefox и Chrome на Linux:

body.modal-open {
    overflow: inherit;
    padding-right: inherit !important;
}

Ответ 29

Это сработало для меня. Переопределяет дополнение 17px, добавленное справа от тела:

body.modal-open {
    padding-right: inherit !important;
}

Ответ 30

Я изменил этот ответ дальше по этой теме TBAG

body.modal-open {padding-right: 0px! important; overflow-y: auto; }

С незначительной настройкой он работает на рабочем столе, поскольку переполнение мобильных устройств установлено на скрытый

окончательный код

body.modal-open { padding-left: 16px!important; overflow-y: auto; }

Надеюсь, это поможет!