Bootstrap 模态不会拉伸以适应内容答案

【问题标题】：Bootstrap modal won't stretch to fit contentBootstrap 模态不会拉伸以适应内容
【发布时间】：2014-07-21 20:16:41
【问题描述】：

尽管同样的东西在其他页面上运行良好，但模态框不会拉伸以适应其内容并且最终会太短。唯一似乎可以解决此问题的方法是添加另一个 div 或 p 元素及其下方的任何内容，我宁愿不必这样做。

HTML：

<!-- Donate modal -->
    <div class="modal fade" id="donate" tabindex="-3" role="dialog" aria-labelledby="donateToDev" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="donateTitle">Donate</h5>
                </div>
                <div class="modal-body">
                    <p class="text-center">There's nothing to unlock by donating, but you will be considered awesome by the dev! Who doesn't like being awesome?</p>
                    <div class="text-center">
                        <div style="float:left;display:inline;">
                            PAYPAL
                        </div>
                        <div style="float:right;display:inline;">
                            <p class="bold text-center">Or you could donate with <a href="http://dogecoin.com">Dogecoin</a>:
                            <p class="code">doge donate address here</p>
                        </div>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

CSS：

.bold { font-weight: bold; }
.text-center { text-align: center; }

结果：

【问题讨论】：

或许您可以在这里找到答案：stackoverflow.com/questions/16152275/…
@FaisalAshfaq 不幸的是没有 - 添加所提供的答案似乎没有任何影响。

标签： jquery html css twitter-bootstrap

【解决方案1】：

你没有清理你的花车。要快速解决问题，您可以使用“text-center”类将“clearfix”添加到 div。

在这里阅读：http://getbootstrap.com/css/#helper-classes-clearfix

【讨论】：

【解决方案2】：

试试这个：

  <div class="modal-body" style="overflow-y:auto;">

【讨论】：

【解决方案3】：

您可能有另一个样式表阻碍了 bootstrap.css 文件。尝试使用浏览器的检查元素

或

试试这个

.modal-dialog{overflow:visible;min-height:100%!important;}

您可以尝试使用“！important”来覆盖导致它发生的任何事情。

【讨论】：

【解决方案4】：

尝试添加样式

.modal-body{ 高度：100% }

它对我有用:)

【讨论】：