增加Twitter Bootstrap的模态大小
我试图改变模态forms的大小，或者说是让它响应我在那里呈现的内容。 我用它来渲染一个表单，如果需要的话，我宁愿处理滚动。
我呈现的forms可能需要另一个50px – 只是缺lessbutton。
所以我已经尝试覆盖我的application.css.scss文件（使用Rails 3.2）中的.modal样式，但是最大高度和溢出删除似乎被覆盖。
有什么想法吗？
我有完全相同的问题，你可以尝试：
.modal-body { max-height: 800px; } 如果您发现滚动条仅出现在模式对话框的主体部分，则意味着只需调整主体的最大高度。
在Bootstrap 3：
.modal-dialog{ width:whatever }
您需要确保它位于#myModal .modal-body元素上，而不仅仅是#myModal（看到一些人犯这个错误），您可能还想通过更改模态边距来适应高度变化。
使用新的CSS3“vh”（或“vw”作为宽度）度量（将高度设置为视图端口的一小部分）使用：
.modal-body { max-height: 80vh; //Sets the height to 80/100ths of the viewport. }
这样，如果你使用的是一个响应式框架，比如Bootstrap，那么你也可以把这个devise保留在你的模式中。
混合两种方法的宽度和高度，你有一个很好的黑客：
CSS：
#myModal .modal-body {max-height: 800px;}
JQuery的：
$('myModal').modal('toggle').css({'width': '800px','margin-left': function () {return -($(this).width() / 2);}})
这是我使用的一个。 它修复了宽度和高度的边距和滚动条问题，但不会调整模式以适应其内容。
希望我有帮助！
我得到了答案…的事情是，你已经覆盖了最大高度属性以及引导模态可以调整超过500像素的高度限制
使用CSS类（您也可以重写样式 – 不build议）：
（HTML）
<div class="modal-body custom-height-modal" >
（CSS）
.custom-height-modal { height: 400px; }
只需设置“.Modal-body”高度：100％，它会根据您的内容自动调整高度，并根据您的屏幕设置“最高 – 高度”。
你有没有试过尺寸参数：
return $modal.open({ backdrop: 'static', size: 'sm', templateUrl: "app/views/dialogs/error.html", controller: "errorDialogCtrl",
可选尺寸
Modals有两个可选的尺寸，通过修饰符类可以放在一个.modal对话框中。
- 默认：600px
- sm：小，宽度为300px
- lg：大，宽度为900px
如果你想要不同的东西，更新bootstarp.css
@media (min-width: 768px) { .modal-dialog { width: 600px; margin: 30px auto; } .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); box-shadow: 0 5px 15px rgba(0, 0, 0, .5); } .modal-sm { width: 300px; } .modal-xy { // custom width: xxxpx; } } @media (min-width: 992px) { .modal-lg { width: 900px; } }
假设你的模态有一个modal1的id，下面的CSS会增加模态的高度并显示任何溢出。
#modal1 .modal-body{ max-height: 700px; overflow: visible; }
尝试了一些上述需要设置特定的宽度和高度的大小（以模式显示图像），因为没有上述帮助我决定重写样式，并添加了以下的主要<div> class =“modal hide fade in”：即为模式背景的style标签添加一个宽度。
style="display: none; width:645px;"
然后将下面的“风格”标签添加到模态体：
<div class="modal-body" style="height:540px; max-height:540px; width:630px; max-width:630px;">
像现在的魅力一样工作，我正在显示一个图像，现在它适合完美。
这对我工作：
#modal1 .modal { overflow-y: hidden; } #modal1 .modal-dialog { height: 100%; overflow-y: hidden; }
请注意，在我的情况下，我嵌套模式，每个具有需要不同高度的控件，当我切换嵌套模式内的控件的显示，所以我不能应用最大高度 ，而不是高度：100％适合我。
如果你想保持响应式框架，不要忘记可选的引导类modal-lg和modal-sm 。 并在表单下方添加一个clearfix，这可能有助于依赖于您的结构。
我最近正在尝试这个，得到这个正确的：希望这会有所帮助
.modal .modal-body{ height: 400px; }
这将调整你的模型的高度。
