Html Bootstrap 3 模态响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23974639/
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
Bootstrap 3 modal responsive
提问by jesicadev18
I have a modal but it's not resizing on smaller screens ( tablets, etc ). Is there a way to make it responsive ? Couldn't find any information on bootstrap docs. Thanks
我有一个模态，但它不会在较小的屏幕（平板电脑等）上调整大小。有没有办法让它响应？找不到有关引导程序文档的任何信息。谢谢
I update my html code: ( its inside a django for loop )
我更新了我的 html 代码：（它在 django for 循环中）
<div class="modal fade " id="{{ p.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Producto</h4>
</div>
<div class="modal-body">
<h5>Nombre : {{ p.name}}</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
I have these css settings:
我有这些 css 设置：
.modal-lg {
max-width: 900px;
}
@media (min-width: 768px) {
.modal-lg {
width: 100%;
}
}
@media (min-width: 992px) {
.modal-lg {
width: 900px;
}
}
采纳答案by Nufayl
I had the same issue I have resolved by adding a media query for @screen-xs-min in less version under Modals.less
我通过在 Modals.less 下的 less 版本中为 @screen-xs-min 添加媒体查询解决了同样的问题
@media (max-width: @screen-xs-min) {
.modal-xs { width: @modal-sm; }
}
回答by PM 77-1
From the docs:
从文档：
Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog: modal-lgand modal-sm(as of 3.1).
模态有两个可选的大小，可通过放置在.modal-dialog:modal-lg和modal-sm（从 3.1 开始）的修饰符类获得。
Also the modal dialogue will scale itselfon small screens (as of 3.1.1).
此外，模态对话将在小屏幕上自行缩放（从 3.1.1 开始）。
回答by sfletche
You should be able to adjust the width using the .modal-dialogclass selector (in conjunction with media queriesor whatever strategy you're using for responsive design):
您应该能够使用.modal-dialog类选择器调整宽度（结合媒体查询或您用于响应式设计的任何策略）：
.modal-dialog {
width: 400px;
}
回答by Rob Scott
Old post. I ended up setting media queries and using max-width: YYpx;and width:auto;for each breakpoint. This will scale w/ images as well (per say you have an image that's 740px width on the mdscreen), the modal will scale down to 740px (excluding padding for the .modal-body, if applied)
旧帖。我最终设置了媒体查询max-width: YYpx;并width:auto;为每个断点使用和。这也将与图像一起缩放（假设您在md屏幕上有一个宽度为 740 像素的图像），模态将缩小到 740 像素（不包括 的填充.modal-body，如果应用）
<div class="modal fade" id="bs-button-info-modal" tabindex="-1" role="dialog" aria-labelledby="Button Information Modal">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-body"></div>
</div>
</div>
</div>
Note that I'm using SCSS, bootstrap 3.3.7, and did not make any additional edits to the _modals.scssfile that _bootstrap.scssimports. The CSS below is added to an additional SCSS file and imported AFTER _bootstrap.scss.
请注意，我使用的是 SCSS、bootstrap 3.3.7，并且没有_modals.scss对_bootstrap.scss导入的文件进行任何额外的编辑。下面的 CSS 被添加到一个额外的 SCSS 文件并在 AFTER 之后导入_bootstrap.scss。
It is also important to note that the original bootstrap styles for .modal-dialogis not set for the default 992px breakpoint, only as high as the 768px breakpoint (which has a hard set width applied width: 600px;, hence why I overrode it w/ width: auto;.
同样重要的是要注意，原始引导样式.modal-dialog没有为默认的 992px 断点设置，仅与 768px 断点一样高（应用了硬设置宽度width: 600px;，因此为什么我用width: auto;.
@media (min-width: $screen-sm-min) { // this is the 768px breakpoint
.modal-dialog {
max-width: 600px;
width: auto;
}
}
@media (min-width: $screen-md-min) { // this is the 992px breakpoint
.modal-dialog {
max-width: 800px;
}
}
Example below of modal being responsive with an image.
下面的模态响应图像的示例。
回答by Fokou Franklin
I had the same problem, and a easy way i found to solve that was to make everything in the modal's body responsive(using boostrap classes) and my problem were solved.
我遇到了同样的问题，我发现解决这个问题的一个简单方法是使模态主体中的所有内容都具有响应性（使用 boostrap 类），我的问题就解决了。
