增加Twitter Bootstrap的模态大小

Question

我试图改变模态形式的大小,或者更确切地说 - 让它响应我在那里渲染的内容.我正在使用它来呈现一个表单,并且如果需要我更喜欢处理滚动.

我渲染的表单可能需要另外50px - 只是缺少按钮.

所以我尝试覆盖application.css.scss文件中的.modal样式(使用Rails 3.2),但是max-height和overflow declerations似乎被覆盖了.

有什么想法吗？

Answer 1

我有完全相同的问题,你可以尝试:

.modal-body {
    max-height: 800px;
}

如果您注意到滚动条仅出现在模态对话框的主体部分,则表示仅需要调整主体的最大高度.

设置模态体的最大高度是不够的,因为模态的底部可能被推出屏幕外.我成功了:.modal {top:5%; 底部:5%; } .modal-body {max-height:100%; 高度:85%; } (14认同)
我不得不使用高度:800px而不是max-height:800px才能工作. (2认同)

Answer 2

在Bootstrap 3中:

.modal-dialog{
  width:whatever
}

Answer 3

您需要确保它位于#myModal .modal-body元素上,而不仅仅是#myModal(看到一些人犯了这个错误),您可能还希望通过更改模态边距来适应高度变化.

Answer 4

使用新的CSS3'vh'(或宽度'vw')测量(将高度设置为视口的一小部分)使用:

.modal-body {
    max-height: 80vh; //Sets the height to 80/100ths of the viewport.
}

这样,如果您使用的是响应式框架(如Bootstrap),那么您也可以将该设计保留在模态中.

Answer 5

混合宽度和高度的两种方法,你有一个很好的黑客:

CSS:

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

JQuery的:

$('myModal').modal('toggle').css({'width': '800px','margin-left': function () {return -($(this).width() / 2);}})

这是我使用的那个.它修复了宽度和高度的边距和滚动条问题,但它不会调整模式的大小以适应其内容.

希望我有所帮助!