Twitter Bootstrap modal empuja el contenido html a la izquierda

Prueba esto:

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 */
}

En realidad es causada por la siguiente regla en bootstrap.css:

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

No estoy exactamente seguro de por qué se comporta así (tal vez para tener en cuenta la barra de desplazamiento de alguna manera), pero puede cambiar el comportamiento con esto:

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

EDITAR: En realidad, este es un problema reportado en bootstrap: https://github.com/twbs/bootstrap/issues/9855

Cuando el modelo se abre, un relleno de 17px a la derecha del cuerpo. El siguiente código debería resolver ese problema.

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

Aquí está la solución propuesta por el usuario yshing que realmente FIJO para mí, mientras que el uso de Bootstrap v3.1.1 y Google Chrome 35.0.1916.114m. La solución viene de un hilo de problemas de GitHub con respecto a este asunto:

.modal
{
    overflow-y: auto;
}

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

La corrección aterrizará solo en Bootstrap 3.2 como está desbricado por mdo.

Para evitar que la página se desplace en instancias similares, por ejemplo, una apertura de acordeón que pasa por la parte inferior de la página, agrego esto en CSS:

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

El overflow-y: scroll fuerza la barra de desplazamiento a presentarse en todo momento. Para ser honesto, no puedo recordar por qué puse height:100% allí... pero no parece que lo necesite para este problema.

Demo: http://jsfiddle.net/jxX6A/8 /

Todavía Hay un poco de movimiento. Pero eso parece estar presente en el propio ejemplo de Bootstrap página: http://getbootstrap.com/javascript/#modals

Así que supongo que estás atascado con él... pero sigue siendo mucho mejor de lo que estabas viendo inicialmente.

EDIT: Podría preocuparme que agregar estos estilos interfiera con otras cosas de Bootstrap, ya que no lo he usado yo mismo, por lo que es posible que desee volver a verificar eso.

Simplemente edita .modal-abrir la forma de clase bootstrap.min.css file, I thin it's will be ok .modal-open{overflow:auto}

El over-flow:hidden se establece allí , usted acaba de establecer over-flow:auto .

He enfrentado el mismo problema y la siguiente solución

.modal-open {
    overflow: visible;
}

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

Mucho ha cambiado desde bootstrap 3.3.6 por lo que las soluciones anteriores pueden no ser suficientes.

Para resolver esto, mira la función setScrollbar en bootstrap.js (o bootstrap-min.js por supuesto), notará inmediatamente que bootstrap está agregando relleno-derecho al elemento body estableciendo su valor a un valor calculado de scrollbarWidth más relleno existente-derecho en el cuerpo (o 0 si no).

Si comentas lo siguiente

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

En tu css override bootstrap modal-open clase con la siguiente

.modal-open{
  overflow:inherit;
 }

La gente ha sugerido overflow-y: scroll; el problema con esto es que su contenido cambia si la barra de desplazamiento no existe en primer lugar.

NB Según http://getbootstrap.com/javascript/#modals , siempre intente colocar el código HTML de un modal en una posición de nivel superior en su documento

Encontré esta respuesta en TB issues

Simplemente agregando esto debajo de css ese pequeño movimiento se arreglará

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

Créditos para https://github.com/tvararu

Utilizo Bootstrap v3.3.4 y ver este problema, entendí que Bootstrap modal añadir 17px relleno derecho al cuerpo, así que simplemente utilice el siguiente código:

body {
    padding-right: 0 !important;
}

No hay solución aquí solucionado mi problema. Pero seguir Css que obtuve de Github funcionó para mí.

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

Simplemente haga esto y eso es todo

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

Funciona para mí. Corto y hace el trabajo.

Este es un problema reportado a bootstrap: https://github.com/twbs/bootstrap/issues/9855

Y esta es mi solución rápida temporal y funciona usando la barra de navegación superior fija, solo usando javascript. Cargue este script junto con su página.

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

Aquí está el ejemplo de trabajo: http://jsbin.com/oHiPIJi/64

Me he enfrentado al mismo problema y la siguiente solución funciona para mí

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

Trate de cambiar toda la ocurrencia de abajo

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

Con

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

En tu bootstrap.archivo js.

Eso Es Todo..

Tengo el mismo problema y tengo la solución que es el trabajo para mí....

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

Coloque este código en la parte superior de su archivo style.css

Simplemente agregue una clase

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

Funcionó para mí

Arreglé mi problema y creo que funcionará para todos. En bootstrap.js hay una línea:

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

Significa que en algún caso Bootstrap agregará un padding-right del ancho de la barra de desplazamiento mientras abre un modal. Así que @pmanOnu tenía razón a mitad de camino, pero no borre toda esta línea de código, pero solo

Reemplaza bodyPad + this.scrollbarWidth en bootstrap.js con 0

Para hacer Bootstrap añadiendo un padding-right de 0px (que es lo mismo de no añadir).

Luego agrega .modal-open {overflow: initial;} a tu css personalizado para evitar que Bootstrap deshabilite la barra de desplazamiento al abrir los modales.

Si todas las soluciones anteriores no funcionaron, puede ser debido al posicionamiento del contenido ,solo eche un vistazo a la posición del modal

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

Así que resulta que en realidad estaba obteniendo margen derecho de 250px más o menos. Mi problema parecía ser ese .modal-open se estaba poniendo en posición: fijo, y esa era la causa por cualquier razón. Así que en mi caso, la solución fue similar, pero establecí el valor de posición por defecto como se muestra a continuación:

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

Para cualquiera que todavía tenga problemas con esto, la última versión de Bootstrap tiene una solución nativa. Solo actualiza el bootstrap.min.css y bootstrap.min.archivos js de la última versión.

Http://getbootstrap.com/

Realmente no me gustó ninguna de las soluciones proporcionadas, y utilizó una combinación de ellas (junto con una solución que anteriormente tenía para los modales qTip) para llegar a algo que funcionó mejor para mí con Bootstrap v3.3.7.

ACTUALIZACIÓN: Se resolvió el problema con el posicionamiento fijo de la barra de navegación en 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");
    })
})

Esto permite que el fondo sea "fijo" pero aún así permite que los modales sean desplazables, resuelve el problema de double barra de desplazamiento y el reposicionamiento de la barra de navegación fija.

Tenga en cuenta que también hay código adicional para recordar la posición 'scroll' (y volver a ella) cuando el modal está cerrado.

Espero que esto ayude a cualquier otra persona que busque lograr lo que yo buscaba.

Encontré la respuesta de Agni Pradharma trabajando para mí; sin embargo, no del todo en Chrome.

Parece que la barra de desplazamiento del documento es más ancha que otra barra de desplazamiento de elements; así que edité la función getScrollBarWidth.

Simplemente comprueba primero el ancho; elimina la barra de desplazamiento del documento; luego compara la diferencia. También pasa a ser mucho menos código.

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

Esto es lo que usé, funcionará 100% en Bootstrap 3.2.0 siempre y cuando no te importe forzar las barras de desplazamiento.

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

, La mejor manera es: añadir al CUERPO overflow-y: scroll

Y eliminar la función 4 de bootstrap.js -

 checkScrollbar
 setScrollbar
 resetScrollbar
 measureScrollbar

Para mí funciona bien así

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

Para mí lo siguiente parece funcionar-probado en Firefox y Chrome en Linux:

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

Esto funcionó para mí. Anula el relleno de 17px añadido a la derecha del cuerpo:

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

He ajustado esta respuesta más arriba en este hilo por TBAG

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

Con un pequeño retoque funciona en el escritorio, para dispositivos móviles el desbordamiento se establece en oculto

Código final

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

Espero que esto ayude!