模态页脚不起作用

Question

在下面的代码中，没有显示模态页脚。它显示页脚的关闭按钮，但在模式之外。不知道为什么会这样。模态正文正在显示，但不显示模态页脚，并且在模态标题之后还显示了额外的一行。有人可以帮帮我吗？

     echo "<button class='btn btn-primary btn-lg' data-toggle='modal' data-  
     target='#myModal' style='margin-top:230px;margin-  
      left:10px;'>Appointment</button>";

      echo "<div class='modal fade' id='myModal' tabindex='-1' role='dialog'   
      aria-labelledby='myModalLabel' aria-hidden='true'>";
      echo "<div class='modal-dialog'>";
      echo "<div class='modal-content'>";
      echo "<div class='modal-header'>";
      echo "<button type='button' class='close' data-dismiss='modal' aria-  
      hidden='true'>&times;</button>";
      echo "<h4 class='modal-title' id='myModalLabel'>Book    
      Appointment</h4>";

       echo "</div>";
       echo "<div class='modal-body'>";
       echo "<div class='col-md-8'>";
       echo "<div class='row'>";
       echo "<label for='idTourDateDetails'>Date and Time</label>";
       echo "<div class='form-group'>";
       echo "<div class='input-group'>";
       echo "<input type='text' name='idTourDateDetails' id='idTourD  
       ateDetails' readonly='readonly' class='form-control clsDatePicker'> 
      <span class='input-group-addon'><i id='calIconTourDateDetails' 
      class='glyphicon glyphicon-th'></i></span>";

      echo "</div>";

        echo "</div>";
        echo "</div>";
         echo "</div>";

       echo "<div class='modal-footer'>";
       echo "<button type='button' class='btn btn-default' data-
       dismiss='modal'>Close</button>";
       echo "</div>";
       echo "</div>";
       echo "</div>";
       echo "</div>";           
       echo "</div>";

Answer 1

这应该可以解决它（div 标签问题）

#myModal{
  border:solid black;
}

<button class='btn btn-primary btn-lg' data-toggle='modal' data-  
     target='#myModal' style='margin-top:230px;margin-  
      left:10px;'>Appointment</button>
<div class='modal fade' id='myModal' tabindex='-1' role='dialog'   
      aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog'>
  <div class='modal-content'>
    <div class='modal-header'>
      <button type='button' class='close' data-dismiss='modal' aria-  
      hidden='true'>&times;</button>
      <h4 class='modal-title' id='myModalLabel'>Book    
      Appointment</h4>
    </div>
    <div class='modal-body'>
      <div class='col-md-8'>
        <div class='row'>
          <label for='idTourDateDetails'>Date and Time</label>
          <div class='form-group'>
            <div class='input-group'>
              <input type='text' name='idTourDateDetails' id='idTourD  
       ateDetails' readonly='readonly' class='form-control clsDatePicker'> 
              <span class='input-group-addon'><i id='calIconTourDateDetails' 
      class='glyphicon glyphicon-th'></i></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class='modal-footer'>
      <button type='button' class='btn btn-default' data-
       dismiss='modal'>Close</button>
    </div>
  </div>
</div>
</div>