Question

我的数据库内容包含不同类型的数据，例如Youtube视频，Vimeo视频，文本，Imgur图片等。所有这些都有不同的高度和宽度。我在搜索互联网时发现的只是将大小改为一个参数。它必须与弹出窗口中的内容相同。

这是我的HTML代码。我也使用Ajax来调用内容。

<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="ModalLabel"></h3>
    </div>
    <div class="modal-body">

    </div>
</div>

Answer 1

这对我有用，以上都没有。

.modal-dialog{
    position: relative;
    display: table; /* This is important */ 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}

Answer 2

由于您的内容必须是动态的，您可以在模式的show事件上动态设置模态的css属性，该事件将重新调整模态的大小，覆盖其默认规范。原因是bootstrap使用css规则将max-height应用于模态体，如下所示：

.modal-body {
    position: relative;
    overflow-y: auto;
    max-height: 400px;
    padding: 15px;
}

因此，您可以使用jquery css方法动态添加内联样式：

对于较新版本的bootstrap，请使用show.bs.modal

$('#modal').on('show.bs.modal', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

对于早期版本的bootstrap，请使用show

$('#modal').on('show', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

或使用css规则覆盖：

.autoModal.modal .modal-body{
    max-height: 100%;
}

并将此类autoModal添加到目标模态中。

在小提琴中动态更改内容，您将看到相应调整大小的模式。 Demo

较新版本的bootstrap可以看到可用的event names。

show.bs.modal 调用show instance方法时会立即触发此事件。如果由单击引起，则单击的元素可用作事件的relatedTarget属性。
shown.bs.modal 当模式对用户可见时将触发此事件（将等待CSS过渡完成）。如果由单击引起，则单击的元素可用作事件的relatedTarget属性。
hide.bs.modal 调用hide实例方法后会立即触发此事件。
hidden.bs.modal 当模态完成对用户隐藏时将触发此事件（将等待CSS过渡完成）。
loaded.bs.modal 当模式使用远程选项加载内容时会触发此事件。

支持较旧版本的bootstrap modal events 。

显示 - 调用show instance方法时会立即触发此事件。
显示 - 当模式对用户可见时将触发此事件（将等待css过渡完成）。
隐藏 - 调用隐藏实例方法后立即触发此事件。
隐藏 - 当模态完成对用户的隐藏时将触发此事件（将等待css转换完成）。

Answer 3

我无法让PSL的答案为我工作所以我发现我所要做的就是设置包含style="display: table;"模态内容的div。模态内容本身表示它想要的大小和模态适应它。

Answer 4

用于bootstrap 3使用

$('#myModal').on('hidden.bs.modal', function () {
// do something…
})

Answer 5

如果你想写css然后添加以下

，有很多方法可以做到这一点

.modal-dialog{
  display: table
}

如果您想添加内联

<div class="modal-dialog" style="display:table;">
//enter code here
</div>

不要将display:table;添加到模态内容类。它完成了你的工作，但处理大尺寸的模态看下面的截图。如果您将样式添加到模态对话框，则第一个图像如果你将样式添加到模态内容。看起来很好看。

Answer 6

简单的Css为我工作

.modal-dialog { 
max-width : 100% ;
}

Answer 7

如果您使用gijgo.com的jquery对话框插件并将宽度设置为自动，则可以这样做。

＆＃13;

$("#dialog").dialog({
  uiLibrary: 'bootstrap',
  width: 'auto'
});

＆＃13;

<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link href="http://code.gijgo.com/1.0.0/css/gijgo.css" rel="stylesheet" type="text/css">
  <script src="http://code.gijgo.com/1.0.0/js/gijgo.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="dialog" title="Wikipedia">
   <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" width="320"/>
 </div>
</body>
</html>

＆＃13;

如果将resizable设置为true，也可以允许用户控制大小。您可以在http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable

查看有关此演示的演示

Answer 8

我只是覆盖了css：

.modal-dialog {
    max-width: 1000px;
}

Answer 9

对于Bootstrap 2自动动态调整模型高度

  //Auto adjust modal height on open 
  $('#modal').on('shown',function(){
     var offset = 0;
     $(this).find('.modal-body').attr('style','max-height:'+($(window).height()-offset)+'px !important;');
  });

Answer 10

我遇到了与bootstrap 3相同的问题，并且模态体div的高度不希望大于442px。在我的案例中，这就是修复它所需要的所有css：

.modal-body {
    overflow-y: auto;
}

Answer 11

我的解决方案只是添加以下样式。 <div class="modal-body" style="clear: both;overflow: hidden;">

Answer 12

一个简单的CSS解决方案，它将使模式垂直和水平居中：

.modal.show {
  display: flex !important;
  justify-content: center;
}

.modal-dialog {
  align-self: center;
}

Answer 13

在模式div上设置width:fit-content。

Answer 14

从Bootstrap 4开始-它具有以下样式：

@media (min-width: 576px)
.modal-dialog {
    max-width: 500px;
}

因此，如果您希望将 modal 宽度调整为更大的某个宽度，我建议例如在您的CSS中使用它：

.modal-dialog { max-width: 87vw; }

请注意，设置width: 87vw;不会覆盖引导程序的max-width: 500px;。

Answer 15

我的搜索将我引到了这里，所以不妨加上我两分钱的想法。如果您使用的是Monkey friendly Twitter Bootstrap modal，则可以执行以下操作：

import pandas as pd
import dask.dataframe as dd

d = {'col1': [1, 2, 3, 4], 'col2': [5, 6, 7, 8]}
df = pd.DataFrame(data=d)
ddf = dd.from_pandas(df, npartitions=2)
ddf.groupby(['col1']).col2.nunique().to_frame().compute()

希望这会有所帮助。

如何根据内容动态调整Twitter Bootstrap模式的大小

15 个答案: