Bootstrap modal altbilgi, modal

'un altına yapışmıyor Yatay bir formda bir önyükleme modelim var ve şu anda height: 80vh;. Modalın bu kadar büyük olmasını istiyorum ve onunla mutlu oluyorum.Bootstrap modal altbilgi, modal

Sorun şu ki, modal-footer düzgün çalışmıyor. Bunun yerine dibine yapışmasını nedeniyle, giriş alanlarına ait olmalıdır alanının büyük bir bölümünü kaplar:

enter image description here

Dibinde kalmak modal-footer zorlamak istiyorum, ama hatta diğer tartışmalar okuduktan sonra ve padding: 0; ile çalışıyorum bunu düzeltemiyorum. Kullandığım kodun bir kısmı aşağıdadır. Okumayı kolaylaştırmak için bazı giriş alanlarını kaldırdım.

Stuborn altbilgisini nasıl düzeltebilirim?

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

kaynak

2014-12-04 Flame_Phoenix

Stillerinizle bir demo yapabilir misiniz? – dfsq

Bir keman gibi mi? Hiç kullanmadım, deneyebilirim: S Herhangi bir öneriniz var mı? –

Plunkr'ı öneririm. İşte sizin için bir temel: http://plnkr.co/edit/EUqJqov3HuAzykIbH9fi?p=preview Kodunuzda gördüğünüz gibi bazı özel CSS stillerinden yoksundur, çünkü yayınladığınız HTML ile sorun yeniden üretilemez. – dfsq

Sen .modal-body yılında .row sınıf ekleyip .col-lg-12 sınıf içinde form etiketi koymak gerekir.

bunu kontrol et, umarım bu işe yarar!

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

kaynak

2014-12-04 10:55:43

Aynı problem birçok yöntemle çözülebilir lütfen sorununuzu belirtin –

Bootstrap modal altbilgi, modal

cevap

İlgili konular