运行此Modal时出现非常奇怪的情况,如下所示:
<button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#reserveModal">
Read more »
</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课程,这是其中一个作业的一部分。我无法弄清楚为什么背景不能覆盖整个模态 - 仅覆盖顶线左右。
答案 0 :(得分:0)
将clearfix
课程添加到<form class="form-inline" role="form" id="reservations">
由于您在col-xs-12
项目上使用form-group
,因此它们会浮动到左侧,因此父表单不会占据其高度。所以你需要对它应用clearfix。如果您不知道clearfix是什么,我建议您查一查。