2016-12-03 17 views
0

Madal Body content appear at modal footer莫代爾美體內容浮到模態頁腳區域,並佔據頁腳

  • 我所面臨的這些模態正文的內容出現在模式頁腳
  • 不管我寫的模式身體內它會漂浮一個問題該模式頁腳

<html> 
 
    <head> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="dist/css/bootstrap-select.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="dist/js/bootstrap-select.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    </head> 
 
    <body> 
 
<div class="row" id="aap_modals"> 
 
\t <div class="col-md-12" > 
 
     <button class="btn btn-success" data-toggle="modal" data-target="#myModal" ><i class="fa fa-book" aria-hidden="true" >&nbsp;&nbsp;&nbsp;Select Question Heading</i></button> 
 
\t </div> 
 
\t <!-- Modal HTML --> 
 
\t <div id="myModal" class="modal fade" data-keyboard="false"  data-backdrop="static"> 
 
     <div class="modal-dialog"> 
 
\t \t <div class="modal-content"> 
 
\t \t <div class="modal-header"> 
 
\t \t  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
\t \t \t <h4 class="modal-title">Select Question</h4> 
 
\t \t </div> 
 
\t \t <div class="modal-body"> 
 
\t \t \t <div class="col-xs-2"> 
 
\t \t \t <label for="ex1">col-xs-2 and this is the problem </label> 
 
\t \t \t \t <input class="form-control" id="ex1" type="text"> 
 
\t \t \t </div> \t 
 
\t \t </div> 
 
\t \t <div class="modal-footer"> 
 
\t \t <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
\t \t <button type="button" class="btn btn-primary">Save changes</button> 
 
\t \t </div> 
 
\t </div> 
 
\t </div> 
 
    </div> 
 
</div> 
 
</body> 
 
    </html>

+1

設置你的風格.COL-XS-2 {浮動:無};兄弟沒有身高 – 2016-12-03 08:42:49

回答

0

你錯過了模態身體裏面一排,替換模式機身採用這種剪斷,

 <div class="modal-body"> 
     <div class="row"> 
      <div class="col-xs-2"> 
        <label for="ex1">col-xs-2 and this is the problem </label> 
        <input class="form-control" id="ex1" type="text"> 
      </div> 
     </div> 
     </div>