Bootstrap模式的内容大小不正确

Question

我在自己的网站上显示引导模式时遇到问题。模态div相对于模态对话框div太高而且太窄。

这是我正在切换模态的地方。

<footer>
    <div id="header-footer-content" class="container">
        <a href="mailto:xxx@xxx.com">Contact</a> |
        <a href="#" data-toggle="modal" data-target="#myModal">Privacy Policy</a>
    </div>
</footer>

这就是我定义模态的方式。 （注意，模态实际上是在我的rails项目的局部视图中定义的，但下面的html是渲染后的结果。）

<div class="container>
    <div class="row">...</div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <p>some text</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

我正在使用bootstrap网站上的示例模式，所以我不确定为什么它会像这样显示。有没有人有这种图形问题的经验？

编辑：我正在使用bootstrap v3.3.4。该网站可以找到here。

Answer 1

我认为它可能与你的模态包裹的容器div有关。尝试删除它，也可以尝试删除它顶部的空行。