Bootstrap modal has a flaw

css, javascript, twitter-bootstrap

Solution

To fix this manually simply add

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

to a stylesheet that is applied after the bootstrap stylesheets.

If you want to hide the scrollbar as well you can add

.modal
{
    overflow-y: auto;
}

as well.

Problem

As I was learning bootstrap and trying out the example on the official page, I found a flaw (maybe) with the modal component. Click the "Launch demo modal", you will notice there is a notable margin on the top right corner, and the navbar will stretch/shrink when the modal dialog disappear/appear. Is that a bug or intentional? I think it's annoying, How to disable it?

Original source

Related problems