如何将 twitter bootstrap modal 设置得越来越宽？

Posted 2023-02-22

【中文标题】如何将 twitter bootstrap modal 设置得越来越宽？

【英文标题】：How to set twitter bootstrap modal wider and higher?

【发布时间】：2013-02-01 21:55:04

【问题描述】：

如何将 twitter bootstrap modal 设置得更宽更高？

此处示例（请点击：启动演示模式）：

http://twitter.github.com/bootstrap/javascript.html#modals

【参考方案1】：

在Bootstrap 3.1.1 中，他们添加了modal-lg 和modal-sm 类。您可以像他们一样使用@media 查询来控制modal 的大小。这是控制modal 大小的更全局的方式。

@media (min-width: 992px) 
    .modal-lg 
        width: 900px;
        height: 900px; /* control height here */
    

示例代码：

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

【讨论】：

这很好，只是您需要在 CSS 中的媒体查询之后放置方括号。

你好，为什么不直接定位类 .modal-dialog 呢？

但也许modal-lg 桅杆被添加到具有modal 类的div 而不是modal-dialog？因为，我使用的是 Bootstrap 3.3.5，只有当我将 modal-lg 添加到 div.modal 时，我才会自动获得更大的模态（无需额外的样式）。

@BohdanKuts 请再次检查。

【参考方案2】：

如果您的模态 ID 是“myModal”

您可以尝试添加如下样式：

#myModal 

    width: 700px; 
    margin-top: -300px !important;
    margin-left:  -350px !important; 
 

#myModal .modal-body 
    max-height: 525px;

【讨论】：

#myModal: style="width:700px; margin: -250px 0 0 -525px;" tabindex="-1" AND .modal-body: style="max-height: 525px;"如何在屏幕中间设置我的模态？ （现在在左边）

更新了！计算大约一半的宽度...边距：-300px 0px 0px -350px .

【参考方案3】：

最简单的方法是使用 .modal-lg。将它添加到模态容器中的模态对话框类中，如下所示：

<div class="modal fade">
    <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                I am now wider!
            </div>
    </div>
</div>

【参考方案4】：

对于以 % 为单位的大小，您可以这样做：

.modal-body

   max-height:80%;

.modal

   height:80%;
   width:70%;
   margin-left: -35%; 

@media (max-width: 768px) 
   .modal
   
    width:90%;
        margin-left: 2%; 
   

【参考方案5】：

更改类模型对话框对我有用

.modal-dialog 
    width: 90%;

【参考方案6】：

在你的 css 文件中，添加一个新的类定义：

.higherWider 
    width:970px;
    margin-top:-250px;

在您的 HTML 中，在您的模式的类字符串中添加 higherWider：

<div class="modal hide fade higherWider">

【讨论】：

我不相信 margin-top 是解决方案，也许你拼错了 margin-left

不，margin-top 定义将元素在页面上移到更高的位置，如将类命名为“higherWider”所示。

【参考方案7】：

接受的答案效果很好，但是我建议使用填充而不是边距。这样，当您在模式对话框之外单击时，您可以保留关闭功能。

#myModal 
    width: 700px; 
    padding-top: -300px !important;
    padding-left: -350px !important; 
 

#myModal .modal-body 
    max-height: 525px;

【参考方案8】：

css:

.modal-lg, .modal-sm 
    min-width: 90%;

代码：

<!-- The Modal -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>

【参考方案9】：

使用 CSS：

.modal 
    width: 900px;
    margin-left: -450px; // half of the width

【参考方案10】：

以下作品没有视口断点，也适用于较旧的引导模式：

#myModal
   position: fixed;
   left: 10% !important;
   right: 10% !important;
   top: 10% !important;
   width: 80% !important;
   margin: 0 !important;

【参考方案11】：

以下任一解决方案都对我有用：

将style="width: 50%; height:50%;" 应用到模态部分中的div 与class="modal-dialog" 一样

<div class="modal-dialog" style="width: 50%; height:50%;">

或

像这样创建样式部分

 #themodal .modal-dialog width:50%; height:50%;