Bootstrap 4模式宽度（增加）

Question

我想模式为屏幕宽度的80％左右。 modal-lg不够大。这：

.modal .modal-dialog { 
    width: 80%; 
} 

不与引导4.工作安排

Answer 1

您可以创建或只是下面做覆盖默认引导modal-lg。

<div class="modal-dialog modal-lg" role="document"> 
<!-- some modal content ---> 
</div 

Answer 2

确保你的模式是不是放置在容器中，尝试添加的重要注解，如果它不是从原来的一个改变宽度！

Answer 3

尝试使用PX

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

只是改变大小。如果不工作只是添加!important所以它看起来像下面

.modal-lg { 
    max-width: 80% !important; 
} 

现在所说的modal-lg

.modal-lg { 
    max-width: 80%; 
} 

：

Answer 4

简单地使用！重要的是给予该类的宽度覆盖你的类。

对于实例

.modal .modal-dialog { 
    width: 850px !important; 
} 

希望这会为你工作。

Answer 5

如果你用无礼的话，

根据documentation您可以自定义默认值。

就您而言，您可以轻松覆盖_custom.scss文件中名为$modal-lg的变量。

Answer 6

对于响应式答案。

@media (min-width: 992px) { 
    .modal-dialog { 
    max-width: 80%; 
    } 
}