尝试使引导程序模态更宽

我正在使用此代码，但模态太薄：

<div class="modal fade bs-example-modal-lg custom-modal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content modal-lg">
            <div class="modal-header modal-lg">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Solutions</h4>
            </div>
            <div class="modal-body modal-lg">
                <p>Content</p>
            </div>
        </div>
    </div>
</div>

看起来是这样的：

我怎样才能使这种模式更加广泛？理想情况下，我希望它的宽度大约是原来的两倍，因为它现在太瘦了。

始终将未缩小的CSS用作引导程序，以便您可以查看它们在组件上具有哪些样式，如果不使用LESS并覆盖它们的mixins或其他内容，则可以在其后创建CSS文件

这是768像素及以上的默认模式CSS：

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

他们有一类modal-lg更大的宽度

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

如果您需要600倍大小的东西和流畅的东西，请在Bootstrap css之后在CSS中执行类似的操作，并将该类分配给modal-dialog。

@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%"

注意：这只会更改此特定模式

您可以尝试：

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

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

只需在您的课程中添加.modal-wide