试图使bootstrap模式更宽

Question

我正在使用此代码,但模式太薄:

<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>

这就是它的样子:

我怎样才能使这个模态更广泛？理想情况下,我希望它大约是宽度的两倍,因为它现在太瘦了.

Answer 1

总是有一个方便的未缩小的CSS引导程序,所以你可以看到他们的组件有什么样的样式,然后在它之后创建一个CSS文件,如果你不使用LESS并覆盖他们的mixins或其他什么

这是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

Answer 2

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

例子：

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

注意：这只会改变这个特定的模式

Answer 3

要跟进 Kryszof Ra 的答案，请尝试使用“min-width”而不是“width”：

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

已验证可与 bootstrap 5 配合使用。