Bootstrap modal-footer nie przykleja się do dna modala

Mam model bootstrap z poziomym formularzem, a obecnie ma on height: 80vh;. Chcę, żeby modal był tak duży i jestem z niego zadowolony.Bootstrap modal-footer nie przykleja się do dna modala

Problem polega na tym, że modal-footer nie działa poprawnie. Zamiast trzymać się dna, to zajmuje dużą część przestrzeni, które powinny należeć do pól wejściowych:

enter image description here

Chcę wymusić modal-footer pozostać na dole, ale nawet po przeczytaniu innych dyskusji i próbując z padding: 0; nie mogę tego naprawić. Poniżej znajduje się fragment kodu, którego używam. Usunąłem część pól wejściowych, aby ułatwić czytanie.

Jak naprawić stopkę stubonu?

$(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>

Źródło

2014-12-04 Flame_Phoenix

Czy możesz zrobić demo ze swoimi stylami? – dfsq

Jak skrzypce? Nigdy nie używany, mogę spróbować: S Czy masz jakieś sugestie? –

Polecam Plunkr. Oto baza dla Ciebie: http://plnkr.co/edit/EUqJqov3HuAzykIbH9fi?p=preview Jak widać, Twój kod prawdopodobnie nie zawiera niektórych specyficznych stylów CSS, ponieważ problem nie jest powtarzalny z opublikowanym właśnie kodem HTML. – dfsq

Należy dodać .row klasę w .modal-body i umieścić tag form wewnątrz .col-lg-12 klasie.

sprawdź to mam nadzieję, że to zadziała !!!

<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>

Źródło

2014-12-04 10:55:43

Ten sam problem można rozwiązać za pomocą wielu metod. podaj swój problem –

Bootstrap modal-footer nie przykleja się do dna modala

Odpowiedz

Powiązane problemy