总是有方便的非小型化的CSS引导，所以你可以看到他们有什么样式的组件，然后创建一个CSS文件后，如果你不使用LESS和覆盖他们的mixin或任何东西
这是768px及更高版本的默认模式css：

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  ...
}

它们具有modal-lg类，用于较大的宽度

@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

如果你需要两倍于600px大小的东西，并且需要一些流畅的东西，在Bootstrap css之后在CSS中做一些类似这样的事情，并将那个类分配给模态对话框。

@media (min-width: 768px) {
  .modal-xl {
    width: 90%;
   max-width:1200px;
  }
}

HTML语言

<div class="modal-dialog modal-xl">

演示：http://jsbin.com/yefas/1

如果您只需要为少数几种模态类型提供此解决方案，只需使用style="width:90%"属性。
例如：

div class="modal-dialog modal-lg" style="width:90%"

注意：这将只更改此特定模态

要跟进Kryszof Ra的回答，请尝试使用“min-width”代替“width”：

<div class="modal-dialog modal-lg" style="min-width:90%;">

已验证与bootstrap 5一起工作。

您可以尝试：

.modal.modal-wide .modal-dialog {
  width: 90%;
}

.modal-wide .modal-body {
  overflow-y: auto;
}

只需在类中添加.modal-wide即可

对于Bootstrap 5.1（2021年11月），前面的答案不起作用。您可以有不同的大小，如下所示：

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
<div class="modal-dialog modal">...</div>

如果这还不够，您还可以通过相对简单的方式进行自定义：
创建一个文件，在其中收集所有 Bootstrap 自定义样式，例如bootstrap-customisation.scss

$modal-md: 600px;
@import '../../node_modules/bootstrap/scss/bootstrap.scss';

这会将标准模式的默认大小从500 px覆盖为600 px。有关详细信息，请访问https://getbootstrap.com/docs/5.0/components/modal/#variables
在您的样式中.scss

@import "bootstrap-customisation";

根据Bootstrap文档，更改Bootstrap模态大小的方法是向.modal-dialog元素添加一个修饰符类。现成的Bootstrap模态可以是5种可能支持的大小中的任何一种，它们是：

1. Small (.modal-sm)
2. Medium/Default (No Class)
3. Large (.modal-lg)
4. Extra-Large (.modal-xl)
5. Fullscreen (.modal-fullscreen)

请注意，尽管Bootstrap支持XXL大小作为其本地网格系统的一部分，但并没有任何Extra-Extra-Large .modal-xxl大小。这很奇怪。它确实感觉应该存在。假设您想要实现它，以良好引导方式（没有在代码中硬编码宽度值）。我有一个.modal-xxl类，我在我的项目中使用它。下面是我实现它的方法：

如何实现超大型.modal-xxl模态尺寸

1.添加一个$modal-xxl变量到你的应用程序特定的_variables.scss。它的值需要是XXL网格断点的最大可能宽度。要做到这一点，使用map-get并获取$container-max-widths数组Map的xxl值。现在，如果由于某种原因你的应用程序XXL网格大小改变了，它也会更新。注意：Bootstrap为此设置的默认值为1320 px。

$modal-xxl: map-get($container-max-widths, 'xxl') !default;

1.现在，您必须将以下代码添加到应用程序特定的SCSS中：

@include media-breakpoint-up(lg) {
    .modal-xxl {
        --#{$variable-prefix}modal-width: #{$modal-lg};
    }
}
@include media-breakpoint-up(xl) {
    .modal-xxl {
        --#{$variable-prefix}modal-width: #{$modal-xl};
    }
}
@include media-breakpoint-up(xxl) {
    .modal-xxl {
        --#{$variable-prefix}modal-width: #{$modal-xxl};
    }
}

"就是这样"
现在，只需将.modal-xxl修饰符类添加到.modal-dialog中，就可以使莫代尔成为XXL尺寸，并且您的莫代尔现在将是一个特大号尺寸。