Bootstrap模式不会拉伸以适应内容

Question

尽管在其他页面上工作正常，但模式不会适应它的内容并且最终会变得太短。似乎唯一能解决的问题是添加另一个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; }

结果：

Answer 1

你没有清理浮子。要快速解决问题，您可以使用“text-center”类为div添加“clearfix”。

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

Answer 2

尝试一下：

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

Answer 3

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

或

试试这个

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

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

Answer 4

尝试添加

样式

.modal体{ 身高：100％ }

它对我有用：）