私のモーダルのレイアウトが正しく表示されない

Question

私のページにこのコードがありますが、動作していますが、モーダルウィンドウが表示されたときに、上記の内容の上にフッタが表示されます。誰かが私を助けるかもしれない私のコードで表示されない何かでなければならない？

Answer 1

ここで原因が考えられるのは、内容がすべてフロートしているため、modal-bodyは実際の高さにならないということです。あなたの体の最後にclearfixクラスを追加することができます。

その後1は、が "しかしform-controlがflotedされていない" と言うかもしれません。はい、ただし、form-control内のすべてのコンテンツはのcol-Xを使用しています。したがって、form-controlには実際の高さもありません。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<a class="btn btn-sm btn-info" href="#addVolum" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span> Adauga volum</a> 
 

 
<div class="modal fade" id="addVolum"> 
 
<div class="modal-dialog"> 
 
    <form action="" method="post" role="form" class="form-horizotal"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
      <h5 class="modal-title">Adaugare volum nou</h5> 
 
     </div> 
 
     <div class="modal-body"> 
 
       <div class="form-group"> 
 
        <label for="loc" class="cotrol-label col-sm-2">Localitate</label> 
 
        <div class="col-sm-4"> 
 
         <input type="text" class="form-control" name="loc" id="loc" placeholder="Localitate"> 
 
        </div> 
 

 
        <label for="siruta" class="control-label col-sm-2">Cod SIRUTA</label> 
 
        <div class="col-sm-4"> 
 
         <input type="text" class="form-control" name="siruta" id="siruta" placeholder="SIRUTA"> 
 
        </div> 
 
       </div> 
 
       <div class="form-group"> 
 

 
        <div class="col-sm-6"> 
 
         <select name="tip" id="tip" class="form-control"> 
 
          <option>1 - PFL</option> 
 
          <option>2 - PFS</option> 
 
          <option>3 - PJL</option> 
 
          <option>4 - PJS</option> 
 
         </select> 
 
        </div> 
 

 
        <label for="vol" class="control-label col-sm-2">Volum</label> 
 
        <div class="col-sm-4"> 
 
         <input type="text" class="form-control" name="vol" id="vol" maxlength="3" placeholder="Volum"> 
 
        </div> 
 
       </div> 
 

 
       <div class="form-group">  
 
        <label for="nr_poz" class="control-label col-sm-2">Numar pozitii fizice:</label> 
 
        <div class="col-sm-4"> 
 
         <input type="text" class="form-control" name="nr_poz" id="nr_poz" placeholder="Nr. pozitii"> 
 
        </div> 
 

 
        <label for="nr_pr_poz" class="control-label col-sm-2">Numarul primei pozitii:</label> 
 
        <div class="col-sm-4"> 
 
         <input type="text" class="form-control" name="nr_pr_poz" id="nr_pr_poz" placeholder="Nr. pozitie"> 
 
        </div> 
 
       </div> 
 
      <! -- Clearfix in the end of the body --> 
 
<div class="clearfix"></div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default " data-dismiss="modal">Inchide</button> 
 
      <button type="submit" class="btn btn-success" name="trimite" value="Creaza volum">Creaza volum 
 
       <span class="glyphicon glyphicon-check"></span> 
 
      </button> 
 
      
 
     
 
     </div> 
 
    </div> 
 
    </form> 
 
</div><!-- /.modal-dialog --> 
 
</div><!-- /.modal -->