模态背景不延伸

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">

由于您在form-group项目上使用了col-xs-12 ，因此它们会浮动到左侧，因此父表单不会占用其高度。 所以你需要对它应用clearfix。 如果您不知道clearfix是什么，我建议您查一查。