试图使引导模式更宽 [英] Trying to make bootstrap modal wider

问题描述

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

I am using this code but the modal is too thin:

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

这就是它的样子:

如何使该模态更宽?理想情况下，我希望它的宽度大约是这个宽度的两倍，因为它现在太瘦了.

How can I make that modal much wider? Ideally I'd like it to be around double that width as it is too skinny at the moment.

推荐答案

总是方便地使用未缩小的 CSS 进行引导，这样你就可以看到他们的组件上有哪些样式，然后在它之后创建一个 CSS 文件，如果你不这样做'不要使用 LESS 并覆盖他们的 mixin 或其他任何东西

Always have handy the un-minified CSS for bootstrap so you can see what styles they have on their components, then create a CSS file AFTER it, if you don't use LESS and over-write their mixins or whatever

这是 768px 及以上的默认模态 css:

This is the default modal css for 768px and up:

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

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

They have a class modal-lg for larger widths

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

如果您需要两倍于 600px 大小的东西，并且需要一些流动的东西，请在 Bootstrap css 之后的 CSS 中执行类似的操作，并将该类分配给 modal-dialog.

If you need something twice the 600px size, and something fluid, do something like this in your CSS after the Bootstrap css and assign that class to the 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

这篇关于试图使引导模式更宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！