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

Question

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

这里的例子(请点击:启动演示模式):

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

Answer 1

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

Answer 2

如果您的模态ID是"myModal"

您可以尝试添加以下样式:

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

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

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

Answer 4

对于以%为单位的大小,您可以这样做:

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

Answer 5

改变类模型对话为我做了诀窍

.modal-dialog {
    width: 90%;
}

Answer 6

在您的css文件中,添加一个新的类定义:

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

在HTML中,higherWider为模态添加类字符串:

<div class="modal hide fade higherWider">