是什么让 Bootstrap 模态变高或变宽？答案

【问题标题】：What makes the Bootstrap modal tall or wide?是什么让 Bootstrap 模态变高或变宽？
【发布时间】：2013-04-19 01:35:51
【问题描述】：

我正在尝试使用 Jschr 的 Bootstrap-Modal fork 来允许各种大小的模式。

我无法弄清楚为什么某些模态框更高、更宽或尺寸不同。

这是文档：http://jschr.github.io/bootstrap-modal/

这是一个超级简化的 jsFiddle：http://jsfiddle.net/4NRrr/

以及相关的javascript：

$(function(){

$.fn.modalmanager.defaults.resize = true;

$('[data-source]').each(function(){
  var $this = $(this),
    $source = $($this.data('source'));

  var text = [];
  $source.each(function(){
    var $s = $(this);
    if ($s.attr('type') == 'text/javascript'){
      text.push($s.html().replace(/(\n)*/, ''));
    } else {
      text.push($s.clone().wrap('<div>').parent().html());
    }
  });

  $this.text(text.join('\n\n').replace(/\t/g, '    '));
});

});

还有html

<div class="page-container">
  <div class="container" style="position: relative">
    <button class="demo btn btn-primary btn-large" data-toggle="modal" href="#long">View Demo</button>
  </div>
</div>

<!-- Modal Definitions (tabbed over for <pre>) -->
<div id="long" class="modal hide fade" tabindex="-1" data-replace="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Long Modal</h3>
  </div>
  <div class="modal-body">
    <img src="http://i.imgur.com/KwPYo.jpg" />
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn">Close</button>
  </div>
</div>

【问题讨论】：

标签： javascript css ajax html twitter-bootstrap

【解决方案1】：

看起来它的大小刚好适合 modal-body div 中的内容。例如，如果您替换

<div class="modal-body">
  <img src="http://i.imgur.com/KwPYo.jpg" />
</div>

与

<div class="modal-body">
   <div style="height:100px; overflow:hidden;">
      <img src="http://i.imgur.com/KwPYo.jpg" />
   </div>
</div>

你会得到一个更短的模态框。

【讨论】：