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