Bootstrap div переполнен JQuery modal

Question

У меня есть проблема с внешним интерфейсом. Когда я загружаю Bootstrap DIV в тело JQuery Modal, он перетекает в нижний колонтитул вместо расширения тела. Благодарю.

 <div class="modal fade col-sm-4 col-sm-offset-4" id="register" role="dialogue"> 
      <div class="modal-dialogue"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <h4>Register</h4> 
        </div> 
        <div class="modal-body"> 
         <form action="" method="POST"> 
         <div class="form-group"> 
          <div class="col-sm-12"> 
           <input type="text" class="form-control" name="fname" placeholder="First Name"> 
          </div> 
          <div class="col-sm-12"> 
           <input type="text" class="form-control" name="lname" placeholder="Last Name"> 
          </div> 
          <div class="col-sm-12"><br></div> 
          <div class="col-sm-12"> 
           <input type="text" class="form-control" name="email" placeholder="Email Address"> 
          </div> 
          <div class="col-sm-12"> 
           <input type="text" class="form-control" name="email2" placeholder="Confirm Email Address"> 
          </div> 
          <div class="col-sm-12"> 
           <input type="text" class="form-control" name="pw" placeholder="Password"> 
          </div> 
          <div class="col-sm-12"> 
           <input type="text" class="form-control" name="pw2" placeholder="Re-type Password"> 
          </div> 

          <!-- END ADDRESS FORM --> 
         </div> 
        </form> 
        </div> 
        <div class="modal-footer"> 
         <a class = "btn btn-warning" data-dismiss = "modal">Sign Up</a><a class = "btn btn-warning" data-dismiss = "modal">Cancel</a> 
        </div> 
       </div> 
      </div> 
     </div> 

Answer 1

Добавьте класс 'строки' для вашего .modal-тела

http://jsbin.com/fehivowimu/edit?html,output

<div class="modal fade col-sm-4 col-sm-offset-4" id="register" role="dialogue"> 
    <div class="modal-dialogue"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h4>Register</h4> 
     </div> 
     <div class="modal-body row"> 

     <form action="" method="POST"> 
      <div class="form-group"> 
      <div class="col-sm-12"> 
       <input type="text" class="form-control" name="fname" placeholder="First Name"> 
      </div> 
      <div class="col-sm-12"> 
       <input type="text" class="form-control" name="lname" placeholder="Last Name"> 
      </div> 
      <div class="col-sm-12"><br></div> 
      <div class="col-sm-12"> 
       <input type="text" class="form-control" name="email" placeholder="Email Address"> 
      </div> 
      <div class="col-sm-12"> 
       <input type="text" class="form-control" name="email2" placeholder="Confirm Email Address"> 
      </div> 
      <div class="col-sm-12"> 
       <input type="text" class="form-control" name="pw" placeholder="Password"> 
      </div> 
      <div class="col-sm-12"> 
       <input type="text" class="form-control" name="pw2" placeholder="Re-type Password"> 
      </div> 

      <!-- END ADDRESS FORM --> 
      </div> 
     </form> 

     </div> 
     <div class="modal-footer"> 
     <a class = "btn btn-warning" data-dismiss = "modal">Sign Up</a><a class = "btn btn-warning" data-dismiss = "modal">Cancel</a> 
     </div> 
    </div> 
    </div> 
</div>