使用bootstrap模态的问题:坏线

Question

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

如果我尝试使用Firefox的开发工具复制最终的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元素中直接使用了列.

默认情况下,列浮动到左侧(for width > 992px).因此,您必须清除模态体末端的浮动,只需向or 元素添加一个row类,如下所示:.bootbox-body.modal-body

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