引导模式的内容大小不正确

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 网站上的示例模式，所以我不确定它为什么会这样显示。有没有人遇到过这种图形问题？

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

Answer 1

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