增加Twitter Bootstrap的模式大小

154

我正在尝试更改模态表单的大小，或者-使它响应我在那里渲染的内容。我正在使用它来呈现表单，如果需要，我希望处理滚动。

我渲染的表单可能还需要50px-只是缺少按钮。

因此，我尝试覆盖application.css.scss文件（使用Rails 3.2）中的.modal样式，但是max-height和溢出碎片似乎被覆盖了。

有什么想法吗？

twitter-bootstrap

— 一个派
source

我有一个相同的问题... chrome说可以接受height属性（不要将中线作为覆盖的属性），但是计算出的高度仍然相同

— fespinozacast 2012年

我认为这可能会有所帮助。

— 同步

115

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

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

如果您注意到滚动条仅出现在模式对话框的主体部分，则意味着仅需要调整主体的最大高度。

— 拉比·科迪（Rabih Kodeih）
source

14

仅为模态主体设置max-height是不够的，因为模态底部可能会被推出屏幕。我在以下方面取得了成功：.modal {top：5％; 底部：5％; } .modal-body {max-height：100％; 高度：85％; }

— Csongor Fagyal

2

我必须使用height：800px而不是max-height：800px才能工作。

— 控制论

34

在Bootstrap 3中：

.modal-dialog{
  width:whatever
}

— 门托克
source

考虑到提出问题的日期，我认为TB3并不是问题。但是，无论如何，谢谢您的提示，它真的很有帮助！

— 丹尼斯·布拉加2014年

2

只是为了澄清一下，如果您只想设置特定模态的大小，则可以执行以下操作： #modal_ID .modal-dialog { width: 800px }

— Greg A

22

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

— 里昂·雷维尔
source

9

链接死:(

— 丹

18

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

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

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

— 克里斯·帕顿
source

8

将宽度和高度的两种方法混合使用，您将获得很好的技巧：

CSS：

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

jQuery的：

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

这是我用的那个。它解决了宽度和高度的边距和滚动条问题，但不会调整模式的大小以适合其内容。

希望我能帮上忙！

— 尼扎尔
source

我试图使JQuery正常工作，但是我没有运气。你能帮我吗？我应该在哪里使用JQuery？

— 塞缪尔·泰勒

模态上的max-height将导致下半部分消失并且不可滚动。（如@mcabral建议）

— nagytech

4

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

（html）

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

（css）

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

— g
source

3

我得到了答案...问题是，您也覆盖了max-height属性，以便可以将Bootstrap模态调整为超出500px高度限制的大小

— fespinozacast
source

我在.modal类上尝试了max-height，但是它也不起作用。您也许可以分享您使用过的CSS？

— Apie 2012年

4

.modal {height：600px; 最大高度：700像素；}。就是这样

— fespinozacast

1

这种方法的问题在于，后盖没有展开，因此部分弹出窗口可能无法访问

— mcabral 2012年

2

靴子大模型

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

Bootstrap小模型

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

— 阿德南·艾哈迈德（Adnan Ahmad）
source

1

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

— Shailender Ahuja
source

1

您是否尝试过size参数：

return $modal.open({
  backdrop: 'static',     
  size: 'sm',                   
  templateUrl: "app/views/dialogs/error.html",
  controller: "errorDialogCtrl",

可选尺寸

模态有两个可选的大小，可通过修饰符类将其放置在.modal-dialog上。

默认值：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;
  }
}

— 阿里·阿德拉维（Ali Adravi）
source

1

对于Boostrap> 4，这对我有用：

.modal-content{
  width: 1200px;
}

一个更高级的版本：

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

这是一个codepen：

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

— 阿尔弗雷多·莫拉莱斯·平松
source

0

假设您的模态具有modal1以下CSS 的ID，则会增加模态的高度并显示任何溢出。

#modal1 .modal-body{
    max-height: 700px;
    overflow: visible;
}

— 凯文·鲍索克斯
source

0

由于需要设置宽度和高度的特定大小（以模态显示图像），因此尝试了上述方法中的一些方法，但以上方法均无济于事，因此我决定覆盖样式，并在具有以下内容的主<div>中添加了以下内容： class =“ modal隐藏淡入”：即为modal的背景的样式标签增加了宽度。

style="display: none; width:645px;"

然后将以下“样式”标签添加到模态主体：

<div class="modal-body" style="height:540px; max-height:540px; width:630px; max-width:630px;">

现在就像魅力一样工作，我正在显示图像，现在非常适合。

— FlashTrev
source

有什么理由不赞成这样做？关于您何时认为已犯错误或提出了不正确/无关的评论的一些反馈将很有帮助。

— FlashTrev

0

这对我有用：

#modal1 .modal 
{ 
     overflow-y: hidden; 
}

#modal1 .modal-dialog 
{ 
     height: 100%; 
     overflow-y: hidden; 
}

请注意，在我的情况下，我有嵌套模态，当在嵌套模态中切换控件的显示时，每个控件都需要不同的高度，因此我无法应用max-height，而height：100％对我来说效果很好。

— 紫杉醇
source

0

不要忘了可选的自举类modal-lg和modal-sm，如果你想保持响应框架内。并在您的表单下方添加一个clearfix，这可能取决于您的结构。

— JSV
source

0

我最近在尝试此操作，并得到了正确的答案：希望这会有所帮助

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

这将调整模型的高度。

— 安朱拉·拉纳辛格（Anjula Ranasinghe）
source

0

这是增加引导程序模态大小的另一种简单方法：

$(".modal-dialog").css("width", "80%");

模态的宽度可以根据屏幕的百分比指定。在上面的示例中，我将其设置为屏幕宽度的80％。

下面是相同的工作示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function () {
  		$(".modal-dialog").css("width", "90%");
  });
  </script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

展开摘要

— 扎克斯
source