модальный фон не распространяющие

Question

Я имею очень странное появление при запуске этого Modal, как показано ниже:

<button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#reserveModal"> 
    Read more &raquo; 
</button> 

<div id="reserveModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
     <form class="form-inline" role="form" id="reservations"> 
      <div class="form-group col-xs-12" style=" margin:10px"> 
      <label for="guests" class="col-xs-3 control-label"> 
       <h4>Number of Guests</h4></label> 

      <div class="checkbox col-xs-9" id="guests"> 
       <label class="checkbox-inline margin:0 px"> 
       <input type="radio" name="approve" value=""> 
       <strong>1</strong> 
       </label> 
       <label class="checkbox-inline"> 
       <input type="radio" name="approve" value=""> 
       <strong>2</strong> 
       </label> 
       <label class="checkbox-inline"> 
       <input type="radio" name="approve" value=""> 
       <strong>3</strong> 
       </label> 
       <label class="checkbox-inline"> 
       <input type="radio" name="approve" value=""> 
       <strong>4</strong> 
       </label> 
       <label class="checkbox-inline"> 
       <input type="radio" name="approve" value=""> 
       <strong> 5 </strong> 
       </label> 
       <label class="checkbox-inline"> 
       <input type="radio" name="approve" value=""> 
       <strong> 6 </strong> 
       </label> 
      </div> 
      </div> 
      <div class="form-group col-xs-12" style=" margin:10px"> 
      <label for="section" class="col-xs-3 control-label"> 
       <h4>Section</h4></label> 

      <div class="section col-xs-9" id="section"> 

       <input type="radio" name="section" value="" id="nonSmoking"> 
       <label class="nonSmoking checkbox-inline" for="nonSmoking"> 
       <strong>Non-Smoking</strong> 
       </label> 

       <input type="radio" name="section" value="" id="smoking"> 
       <label class="smoking checkbox-inline" for="smoking"> 
       <strong>Smoking</strong> 
       </label> 
      </div> 
      </div> 
      <div class="form-group col-xs-12" style=" margin:10px"> 
      <label for="date time" class="col-xs-3 control-label text-align:right"> 
       <h4>Date and Time</h4></label> 

      <div class="input-group add-on date datepicker form col-xs-3"> 
       <input type="date" class="form-control date-picker" id="date" /> 
       <div class="input-group-btn"> 
       <button class="btn btn-default"> 
        <i class="fa fa-calendar"></i> 
       </button> 
       </div> 
      </div> 
      <div class="input-group form col-xs-2 col-xs-offset-1"> 
       <input type="time" class="form-control" id="time" placeholder="Time" /> 
       <span class="input-group-addon"> 

         <span class="glyphicon glyphicon-time"></span> 
       </span> 
      </div> 

      </div> 

      <div class="col-xs-12" margin:10px> 
      <button type="submit" class="btn btn-primary col-xs-offset-3">Reserve</button> 

      </div> 

     </form> 


     </div> 
     <!-- /.modal-body --> 
    </div> 
    <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 

Для контекста, я иду через класс Coursera и это является частью одного из заданий. Я не могу понять, почему фон не покрывает всю модальность - только покрывает верхнюю строку или около того.

Вот jsfiddle: https://jsfiddle.net/jacoblhughes/y55uyhfx/2/

Answer 1

Добавить clearfix класс <form class="form-inline" role="form" id="reservations">

Поскольку вы используете col-xs-12 на form-group пунктов, они плавали влево, таким образом, родительская форма не принимает на их высоте. Поэтому вам нужно применить clearfix к нему. Если вы не знаете, что такое clearfix, я бы предложил посмотреть его.