使用Bootstrap模态框时出现问题：不良排版。

Question

我正在创建一个登录按钮，它会打开一个模态框。因为我需要通过AJAX加载其内容，所以我使用bootbox来初始化一个模态框。然后我将加载的内容放入我的模态框中。但是应该在页脚顶部的行却在中间。

如果我尝试使用Firefox的开发工具复制最终的HTML，它可以正常工作。 如果我取消所有样式表的链接，但保留bootswatch的主题，会出现同样的问题。 这是JS：

 $('#login').click(function(event) {
        event.preventDefault();
        bootbox.dialog({
            message: '<img class="col-md-4 col-md-offset-4" src="/images/load/spinner-256.gif" />',
            title: "Please login",
            buttons: {
              'cancel':{
                  label: 'cancel',
                  className: 'btn-link'
              }
            }
        });
        $('.bootbox-body').addClass('loading-bb');
        $.ajax({
            url: '/api/ajax/login',
            success: function(data) {

                $('.bootbox-body').html(data)
                $('.bootbox-body').removeClass('loading-bb');
            }
        })
    })

你可能还想查看这个工作示例：http://polar-wave-4072.herokuapp.com/

- Vinz243

Answer 1

那条水平线属于.modal-footer元素，它是应用于页脚元素的顶部边框。

然而，问题在于您直接在.bootbox-body元素中使用了一个列col-md-12。

默认情况下，列会向左浮动（对于width > 992px）。因此，您必须在模态体的末尾清除浮动，只需将row类添加到以下内容之一：.bootbox-body或.modal-body元素，如下所示:

<div class="bootbox-body row">
    <form class="form-horizontal col-md-12" method="post">
    ....
</div>

- Hashem Qolami

---

要是我早点找到你的答案就好了！！ - svarog