38

如何将 twitter 引导模式设置得更宽更高？

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

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

4

11 回答 11

56

在Bootstrap 3.1.1中，他们添加了modal-lg和modal-sm类。您可以像他们一样使用查询来控制modal大小。@media这是一种更全局的控制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>
于 2014-03-11T18:07:37.057 回答
27

如果您的模态 ID 是“myModal”

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

#myModal 
{
    width: 700px; 
    margin-top: -300px !important;
    margin-left:  -350px !important; 
} 

#myModal .modal-body {
    max-height: 525px;
}
于 2013-02-17T09:58:12.233 回答
12

最简单的方法是使用 .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>
于 2016-01-23T18:59:56.270 回答
10

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

.modal-body
{
   max-height:80%;
}
.modal
{
   height:80%;
   width:70%;
   margin-left: -35%; 
}
@media (max-width: 768px) {
   .modal
   {
    width:90%;
        margin-left: 2%; 
   }
}
于 2013-05-06T23:38:42.507 回答
9

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

.modal-dialog {
    width: 90%;
}
于 2016-02-15T21:02:04.417 回答
5

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

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

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

<div class="modal hide fade higherWider">
于 2013-02-17T10:00:05.030 回答
4

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

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

#myModal .modal-body {
    max-height: 525px;
}
于 2017-11-16T23:34:44.877 回答
2

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>
于 2018-07-06T19:25:37.540 回答
1

使用 CSS：

.modal {
    width: 900px;
    margin-left: -450px; // half of the width
}
于 2013-02-17T09:59:20.927 回答
0

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

#myModal{
   position: fixed;
   left: 10% !important;
   right: 10% !important;
   top: 10% !important;
   width: 80% !important;
   margin: 0 !important;
}
于 2020-07-15T20:23:08.117 回答
-1

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

  1. 应用style="width: 50%; height:50%;"到div模态部分中的class="modal-dialog"类似这样

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

    或者

  2. 像这样创建样式部分

     #themodal .modal-dialog{ width:50%; height:50%;}
于 2015-12-13T13:28:09.777 回答