bootstrap-3 panel footer füllt nicht panel

Question

Ich arbeite an einer responsive Web-Admin-Einzelseite Anwendung, ich bin Bootstrap 3 und AngularJS 1.4.8, ich habe ein Panel erstellt und ich legte ein Formular in diesem Panel, ich legte die Fußzeile innerhalb der Form mit zwei Knöpfen.

Mein Problem ist, dass die Panel-Fußzeile nicht bedeckt/füllen Sie die Panel-Länge.

Muss ich die Fußzeile innerhalb der form setzen, damit die Taste die Informationen senden konnte, oder wenn ich die Fußzeile außerhalb der form stelle, kann der Knopf die Info überhaupt senden?

Ich denke, dass das Problem ist, dass ich eine <div class="col-lg-12"> erstellt das Panel Überschrift zu setzen und in diesem div habe ich einen anderen <div class="col-lg-6"> das Panel Inhalt zu setzen, damit ist, warum die Platte Fußzeile nicht die gesamte Platte abdeckt.

Ich habe versucht, die Fußzeile außerhalb der <div class="col-lg-6"> und es funktioniert, aber wenn dies der Knopf wird außerhalb der form sein. Es scheint mir eine schlechte Übung zu sein, den Knopf außerhalb der form zu setzen.

Hier ist mein HTML-Code

<div class="row"> 
    <div class="col-lg-12"> 
     <h1 class="page-header">Create User</h1> 
    </div> 
    <!-- /.col-lg-12 --> 
</div> 
<!-- /.row --> 
<div class="row"> 
    <div class="col-lg-12"> 
     <div class="panel panel-primary"> 
      <div class="panel-heading"> 
       Basic Form Elements 
      </div> 
      <div class="panel-body"> 
       <div class="row"> 
        <div class="col-lg-6"> 
         <form role="form"> 
          <div class="form-group"> 
           <label>Name:</label> 
           <input class="form-control" placeholder="user name"> 
          </div> 
          <div class="form-group"> 
           <label>Email:</label> 
           <input class="form-control" placeholder="email"> 
          </div> 
          <div class="panel-footer clearfix"> 
           <div class="pull-right"> 
            <button type="reset" class="btn btn-default">Reset</button> 
            <button type="submit" class="btn btn-primary">Send</button> 
           </div> 
          </div> 
         </form> 
        </div> 
        <!-- /.col-lg-6 (nested) --> 
        <!-- /.col-lg-6 (nested) --> 
       </div> 
       <!-- /.row (nested) --> 
      </div> 
      <!-- /.panel-body --> 
     </div> 
     <!-- /.panel --> 
    </div> 
    <!-- /.col-lg-12 --> 
</div> 
<!-- /.row --> 

Answer 1

Der Grund Ihrer Panel-footer nicht richtig an der Unterseite der Platte ausgerichtet ist, ist, weil Sie es im Inneren des tafel Körper. Ihre Panel-Überschrift, Panel-Body und Panel-Footer sollten alle separate Komponenten innerhalb des Panels selbst sein.

Versuchen Sie einfach, die Panel-Fußleiste von der Innenseite des Gehäuses zu entfernen.

Das bedeutet, dass sich die Schaltflächen außerhalb des Formulars befinden, aber Sie können den Formularinhalt nicht über mehrere divs übertragen. Wenn Sie nicht möchten, dass die Schaltflächen aus dem Formular entfernt werden, müssen Sie sie möglicherweise im Körper belassen und sie möglicherweise ähnlich wie ein Panel-Footer aussehen lassen.

Answer 2

Sie müssen die panel-footer div außerhalb der panel-body Div verschieben.

Dieser div sollte beginnen nach der panel-body div wurde geschlossen. Sie müssen Ihr Formular restrukturieren, damit die Schaltfläche "Senden" noch in Ihrem Konto vorhanden ist, oder Sie müssen javascript/jQuery verwenden, um es zu übermitteln, wenn Sie dies nicht möchten.

Sie können Beispielverwendungen verschiedener Panel-Komponenten im Abschnitt Bootstrap components für Panels sehen.

Fest bootply