Probleme mit bootstrap modals: schlechte Zeile

Question

Ich erstelle auf meiner Website eine Login-Schaltfläche, die ein Modal öffnet. B/c Ich muss seinen Inhalt über AJAX laden, ich initialisiere einen mit Bootbox. Dann lege ich den Inhalt in mein Modal. Aber die Linie, die oben auf der Fußzeile sein sollte, ist in der Mitte.

Wenn ich versuche, die endgültige HTML mit Firefox-Entwicklungs-Tools zu kopieren, it works. Wenn ich die Verknüpfung aller Stylesheets aufheben, aber das Thema bootstwatch, dasselbe Problem. Hier ist die 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'); 
      } 
     }) 
    }) 

Sie auch das Arbeitsbeispiel sehen magst: http://polar-wave-4072.herokuapp.com/

Answer 1

Die horizontale Linie gehört zum .modal-footer Elemente. Es handelt sich um einen oberen Rand, der auf das Fußzeilenelement angewendet wird. Das Problem besteht darin, dass Sie eine Spalte col-md-12 direkt innerhalb des Elements .bootbox-body verwendet haben.

Spalten werden standardmäßig nach links verschoben (für width > 992px). Somit haben Sie am Ende des modalen Körper des Schwimmers zu löschen, einfach durch Hinzufügen einer row Klasse dem .bootbox-body oder .modal-body Element wie folgt:

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