增加 Twitter Bootstrap 的模态框大小

Question

增加 Twitter Bootstrap 的模态框大小

twitter-bootstrap

156

我想改变模态表单的大小，或者说让它响应我在那里呈现的内容。我使用它来呈现一个表单，如果需要的话，我宁愿自己处理滚动。

我渲染的表单可能还需要另外50像素 - 只是少了按钮。

因此，我尝试在我的application.css.scss文件中覆盖.modal样式（使用Rails 3.2），但最大高度和溢出声明似乎被覆盖了。

有什么想法吗？

- Apie

我有同样的问题... Chrome 表示 height 属性被接受了（不要将中间线视为被覆盖的属性），但计算出的高度仍然保持不变。 - fespinozacast

我认为这个链接可能会有所帮助。 - Synchro

17个回答

35

在 Bootstrap 3 中：

.modal-dialog{
  width:whatever
}

- Mentok

考虑到提问的日期，我认为TB3不是问题。但无论如何，感谢您的提示，非常有帮助！ - Dennis Braga

2

只是为了澄清，如果您只想设置特定模态框的大小，可以这样做： #modal_ID .modal-dialog { width: 800px } - Greg A

22

您需要确保它在 #myModal .modal-body 元素上，而不仅仅是 #myModal（见过一些人犯这个错误），您可能还想通过更改模态框的边距来适应高度变化。

- Leon Revill

19

使用新的CSS3 'vh'（或宽度为'vw'）测量单位（该单位将高度设置为视口的一部分），请使用以下代码：

使用新的CSS3“vh”（或“vw”用于宽度）测量单位（该单位将高度设置为视口的一部分），请使用：

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

这样，如果您正在使用响应式框架（如Bootstrap），那么您也可以将该设计保留在您的模态框中。

- Chris Paton

8

混合两种宽度和高度的方法，你就能得到一个好的技巧：

CSS：

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

JQuery:

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

这个是我使用的方法。它修复了宽度和高度的边距和滚动条问题，但不会调整模态框大小以适应其内容。

希望对你有所帮助！

- pr.nizar

我尝试让JQuery工作，但是没有成功。你能帮忙吗？我应该在哪里使用JQuery？ - Samuel Taylor

max-height在模态框上会导致底部消失，并且无法滚动。（如@mcabral所建议的） - nagytech

4

使用CSS类（您也可以覆盖样式 - 不建议）：

（html）

<div class="modal-body custom-height-modal" >

(CSS)

.custom-height-modal {
  height: 400px;
}

- xgMz

4

Bootstrap大型模态框

<div class="modal-dialog modal-lg">

Bootstrap小型模态框

<div class="modal-dialog modal-sm">

- Adnan Ahmad

3

我已经找到了答案……问题是你必须覆盖max-height属性，这样bootstrap模态框才能调整大小超过500像素的高度限制。

- fespinozacast

我尝试在 .modal 类上使用 max-height，但它也没有起作用。你可以分享一下你使用的 CSS 吗？ - Apie

4

.modal { 高度: 600像素; 最大高度: 700像素; }. 就是这样。 - fespinozacast

1

这种方法的问题在于后面的覆盖层没有扩展，因此弹出窗口的一部分可能无法到达。 - mcabral

1

对于 Bootstrap > 4，以下方法适用于我：

.modal-content{
  width: 1200px;
}

一种更高级的版本：

body .modal-content{
  width: 160%!important;
  margin-left: -30%!important;
}

这是一个 CodePen：

https://codepen.io/AlfredoMoralesPinzon/pen/xyVOaK

- Alfredo Morales Pinzón

1

只需将“.modal-body”的高度设置为100％，它将根据您的内容自动调整高度，并根据您的屏幕设置“max-height”...

- Shailender Ahuja

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rabih Kodeih · Accepted Answer

我曾遇到完全相同的问题，你可以尝试：

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

如果你注意到模态框只有在主体部分出现滚动条，这意味着只需要调整主体的最大高度。