Bootstrap Modal-Footer klebt nicht am Boden des Modales

Ich habe ein Bootstrap-Modell mit einer horizontalen Form, und es hat derzeit height: 80vh;. Ich möchte, dass das Modal so groß ist und ich bin damit zufrieden. Das Problem ist, dass die modal-footer nicht korrekt verhält. Statt auf den Boden klebt, nimmt es einen großen Teil des Raumes, der zu den Eingabefeldern gehören soll:Bootstrap Modal-Footer klebt nicht am Boden des Modales

enter image description here

ich die modal-footer zwingen will am Boden zu bleiben, aber auch nach anderen Diskussionen Lese und versuchen mit padding: 0; kann ich es nicht beheben. Es folgt ein Teil des Codes, den ich verwende. Ich habe einige Eingabefelder entfernt, um das Lesen zu erleichtern.

Wie kann ich die stubeln Fußzeile reparieren?

$(document).ready(function() { 
 
    $("a").click(function() { 
 
    $('.modal').modal({ 
 
     show: true 
 
    }); 
 
    return false; //prevent browser defualt behavior 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link data-require="[email protected]*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script> 
 

 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <a href="#" class="btn btn-info btn-lg">Click me !</a> 
 
    
 
    <div class="modal fade in" id="editPackageModal" tabindex="-1" role="dialog" aria-labelledby="editPackages" aria-hidden="true"> 
 
    <div class="modal-dialog" style="overflow-y: auto; max-height: 90vh; height: 80vh;"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <h4 class="modal-title" id="myModalLabel">Edit Package MyPackage</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <form class="form-horizontal"> 
 
      <div class="control-group"> 
 
       <label class="control-label">Package Name:</label> 
 
       <div class="controls"> 
 
       <input type="text" class="form-control" id="package-name" placeholder="MyPackageName"> 
 
       </div> 
 
      </div> 
 
      <!-- Other fields here --> 
 
      </form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      <button type="button" class="btn btn-primary" id="savePackageChangesBtn">Save changes</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

Quelle

2014-12-04 Flame_Phoenix

Können Sie mit Ihren Stilen eine Demo erstellen? – dfsq

Wie eine Geige? Nie benutzt, kann ich versuchen: S Hast du irgendwelche Vorschläge? –

Ich empfehle Plunkr. Hier ist eine Basis für Sie: http://plnkr.co/edit/EUqJqov3HuAzykIbH9fi?p=preview Wie Sie sehen können, fehlen Ihrem Code wahrscheinlich einige spezifische CSS-Stile, weil das Problem mit nur HTML, das Sie gepostet haben, nicht reproduzierbar ist. – dfsq

Sie sollten .row Klasse im .modal-body und setzen Sie den form Tag innerhalb .col-lg-12 Klasse hinzuzufügen.

check this out ich hoffe, das wird funktionieren !!!

<div class="modal fade" id="editPackageModal" tabindex="-1" role="dialog" aria-labelledby="editPackages" aria-hidden="true"> 
    <div class="modal-dialog" style="overflow-y: auto; max-height: 90vh; height: 80vh;"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 class="modal-title" id="myModalLabel">Edit Package MyPackageName</h4> 
      </div> 
      <div class="modal-body row"> 
       <div class="col-lg-12" 
       <form class="form-horizontal"> 
        <div class="control-group"> 
         <label class="control-label">Package Name: </label> 
         <div class="controls"> 
          <input type="text" class="form-control" id="package-name" placeholder="MyPackageName"> 
         </div> 
        </div> 
        <!-- Other fields here --> 
       </form> 
      </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary" id="savePackageChangesBtn" data-url="@Url.Action("EditPackage", "Package")">Save changes</button> 
      </div> 
     </div> 
    </div> 
</div>

Quelle

2014-12-04 10:55:43

Das gleiche Problem kann durch viele Methoden gelöst werden können Sie bitte spezifizieren Sie Ihr Problem –

Bootstrap Modal-Footer klebt nicht am Boden des Modales

Antwort

Verwandte Themen