How can I change the default width of a Twitter Bootstrap modal box?

后端 未结 30 2741
醉酒成梦
醉酒成梦 2020-11-27 08:38

I tried the following:

   
30条回答
  •  囚心锁ツ
    2020-11-27 09:28

    UPDATE:

    In bootstrap 3 you need to change the modal-dialog. So in this case you can add the class modal-admin in the place where modal-dialog stands.

    Original Answer (Bootstrap < 3)

    Is there a certain reason you're trying to change it with JS/jQuery?

    You can easily do it with just CSS, which means you don't have to do your styling in the document. In your own custom CSS file, you add:

    body .modal {
        /* new custom width */
        width: 560px;
        /* must be half of the width, minus scrollbar on the left (30px) */
        margin-left: -280px;
    }
    

    In your case:

    body .modal-admin {
        /* new custom width */
        width: 750px;
        /* must be half of the width, minus scrollbar on the left (30px) */
        margin-left: -375px;
    }
    

    The reason I put body before the selector is so that it takes a higher priority than the default. This way you can add it to an custom CSS file, and without worries update Bootstrap.

提交回复
热议问题