Javascript 如何将 twitter bootstrap 模式设置得更宽更高？

How to set twitter bootstrap modal wider and higher?

提问by mamasi

How to set twitter bootstrap modal wider and higher?

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

Example here (please click: Launch demo modal):

示例在这里（请点击：启动演示模式）：

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

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

采纳答案by Mate

If your modal id is "myModal "

如果您的模态 ID 是“myModal”

You could try adding a style like:

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

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

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

回答by Leniel Maccaferri

In Bootstrap 3.1.1they added modal-lgand modal-smclasses. You control the modalsize using @mediaqueries like they do. This is a more global way of controlling the modalsize.

在引导3.1.1他们补充modal-lg和modal-sm类。您可以像他们一样modal使用@media查询来控制大小。这是一种更全局的控制modal大小的方法。

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

Sample code:

示例代码：

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

回答by Vogon Jeltz

The easiest way to do this is to use the .modal-lg. Add it to the modal-dialog class within the modal container like so:

最简单的方法是使用 .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>

回答by c-toesca

For a size in %, you could do this:

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

.modal-body
{
   max-height:80%;
}
.modal
{
   height:80%;
   width:70%;
   margin-left: -35%; 
}
@media (max-width: 768px) {
   .modal
   {
    width:90%;
        margin-left: 2%; 
   }
}

回答by Wishper

altering class model-dialog did the trick for me

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

.modal-dialog {
    width: 90%;
}

回答by Austin Mullins

In your css file, add a new class definition:

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

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

In your HTML, add higherWiderinside the class string for your modal:

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

<div class="modal hide fade higherWider">

回答by A. Walker

The accepted answer works well, however I would recommend using padding rather than margin. This way you retain the dismiss functionality when you click outside of the modal dialog.

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

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

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

回答by Ak?n K?ker

css:

css：

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

code:

代码：

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

回答by dfsq

With CSS:

使用 CSS：

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

回答by user28864

Either of the following solutions worked for me:

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

1. Applying style="width: 50%; height:50%;"to the divin the modal section with the class="modal-dialog"like so

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

   or

2. Creating a style section like so

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

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%;}