试图使引导程序模态更宽 [英] 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">×</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文件后创建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
这是768像素及以上的默认模式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;
}
}
如果您需要600倍大小的东西和流畅的东西,请在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">
Demo: http://jsbin.com/yefas/1
这篇关于试图使引导程序模态更宽的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!