twitter-bootstrap 试图使引导模式更宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25859255/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trying to make bootstrap modal wider
提问by b85411
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">×</button>
<h4 class="modal-title">Solutions</h4>
</div>
<div class="modal-body modal-lg">
<p>Content</p>
</div>
</div>
</div>
</div>
This is what it looks like:
这是它的样子：
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.
我怎样才能使该模式更广泛？理想情况下，我希望它大约是宽度的两倍，因为它目前太瘦了。
回答by Christina
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
始终使用未压缩的用于引导程序的 CSS，以便您可以查看它们的组件上的样式，然后在它之后创建一个 CSS 文件，如果您不使用 LESS 并覆盖它们的 mixin 或其他任何内容
This is the default modal css for 768px and up:
这是 768px 及以上的默认模态 css：
@media (min-width: 768px) {
.modal-dialog {
width: 600px;
margin: 30px auto;
}
...
}
They have a class modal-lgfor larger widths
他们有一个modal-lg更大的宽度类
@media (min-width: 992px) {
.modal-lg {
width: 900px;
}
}
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.
如果您需要两倍于 600px 大小的东西，并且需要一些流畅的东西，请在 Bootstrap css 之后的 CSS 中执行类似的操作，并将该类分配给模态对话框。
@media (min-width: 768px) {
.modal-xl {
width: 90%;
max-width:1200px;
}
}
HTML
HTML
<div class="modal-dialog modal-xl">
Demo: http://jsbin.com/yefas/1
回答by Krzyszof Ra
If you need this solution for only few types of modals just use
style="width:90%"attribute.
如果您只需要为几种类型的模态提供此解决方案，请使用
style="width:90%"属性。
example:
例子：
div class="modal-dialog modal-lg" style="width:90%"
note: this will change only this particular modal
注意：这只会改变这个特定的模式
回答by Tjay
You could try:
你可以试试：
.modal.modal-wide .modal-dialog {
width: 90%;
}
.modal-wide .modal-body {
overflow-y: auto;
}
Just add .modal-wide to your classes
只需将 .modal-wide 添加到您的课程中
