javascript - 使用 Bootstrap 模态 : bad line 的问题

Question

我在我的网站上创建了一个打开模式的登录按钮。 B/c 我必须通过 AJAX 加载它的内容，我使用 bootbox 初始化一个。然后我将内容加载到我的模态中。但是应该在页脚顶部的线在中间。

如果我尝试使用 Firefox 的开发工具复制最终的 html，it works .如果我取消链接所有样式表但 bootstwatch 的主题，同样的问题。这是 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/

Answer 1

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

但是，问题是您直接在 .bootbox-body 元素中使用了列 col-md-12。

默认情况下，列向左浮动(对于 width > 992px)。因此，您必须清除模态主体末尾的 float ，只需将 row 类添加到 .bootbox-body 或 .modal-body 元素，如下:

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