7

我正在我的网站上创建一个登录按钮，它打开一个模式。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/

4

1 回答 1

13

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

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

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

<div class="bootbox-body row">
    <form class="form-horizontal col-md-12" method="post">
    ....
</div>
于 2014-03-01T21:37:14.487 回答