更改bootstrap 3模态宽度保持响应性

时间:2015-12-10 23:00:47

标签: javascript css twitter-bootstrap bootstrap-modal

我刚刚在this article上读到你可以改变引导模态宽度:

.modal .modal-dialog { width: 800px; }

但是当我这样做时,我放弃了模态的默认响应。

如何更改宽度但保持移动设备的响应能力?

enter image description here

1 个答案:

答案 0 :(得分:2)

只需使用max-width即可。它会变得敏感 -

.modal .modal-dialog { width: 800px; max-width:100%; }

或者,您可以通过媒体查询来完成。

@media only screen and (max-width: 480px) {
    .modal .modal-dialog {
        position:relative;
        width:auto;
        margin: 10px;
    }
}