试图让bootstrap模式更宽(Trying to make bootstrap modal wider)

试图让bootstrap模式更宽(Trying to make bootstrap modal wider)

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

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

这是它的样子：

我怎样才能使这种模式更广泛？ 理想情况下，我希望它的宽度是目前的两倍。

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>

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.

最满意答案

总是有非常方便的引导程序的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

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

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

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

They have a class modal-lg for larger widths

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

@media (min-width: 768px) { .modal-xl { width: 90%; max-width:1200px; } }

HTML

<div class="modal-dialog modal-xl">

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