使用bootstrap模态的问题：坏线

Question

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

如果我尝试使用Firefox的开发工具it works复制最终的html。 如果我取消链接所有样式表但是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元素。它是应用于页脚元素的顶部边框。

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

默认情况下，列浮动到左侧（width > 992px）。因此，您必须清除模态体末端的浮动，只需向row或.bootbox-body元素添加.modal-body类，如下所示：

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