使用引導模式的問題：壞行

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元素。這是應用於頁腳元素的頂部邊框。

但問題是，您在.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>