尝试使引导模式更广泛

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

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

它看起来是这样的：

我怎样才能使该模式更广泛？理想情况下，我希望它的宽度约为该宽度的两倍，因为目前它太瘦了。

总是方便地使用未缩小的 Bootstrap 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">

Demo: http://jsbin.com/yefas/1 http://jsbin.com/yefas/1