看看这个笨蛋:
我正在使用 Bootstrap 3.x:并且我有 4 个带有 form-group 类的 div。
这些“表单组”之间的差距是相同的，除了学年名称和开始日期之间的差距，它只是一半，并且在所有当前浏览器上都有相同的错误差距。这是为什么？
<强> Plnkr Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<style>
body {
padding-top: 60px;
}
@media (max-width: 979px) {
/* Remove any padding from the body */
body {
padding-top: 0;
}
}
</style>
<link href="style.css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<!-- Le javascript
================================================== -->
<script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div style="background: lightgreen;" class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>
<form class="form-horizontal">
<fieldset>
<!-- schoolyear name -->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Schoolyear name</label>
<div class="col-md-4">
<input id="textinput" name="textinput" ng-model="activeStep.schoolyearName" type="text"
placeholder="placeholder" class="form-control input-md">
</div>
</div>
<!-- Start date -->
<div class="form-group">
<label class="col-md-4 control-label" for="startDateDatepicker">Start date</label>
<div class="col-md-4">
<p class="input-group">
<input
id="startDateDatepicker"
type="text"
class="form-control"
datepicker-popup="{{format}}"
ng-model="activeStep.endDateModel.now"
is-open="activeStep.endDateModel.isOpen"
min-date="activeStep.endDateModel.minDate"
max-date="activeStep.endDateModel.maxDate"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="activeStep.endDateModel.openEndDatePopup($event)"><i
class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<!-- End date -->
<div class="form-group">
<label class="col-md-4 control-label" for="endDatePicker">End date</label>
<div class="col-md-4">
<p class="input-group">
<input
id="endDatePicker"
type="text"
class="form-control"
datepicker-popup="{{format}}"
ng-model="activeStep.startDateModel.now"
is-open="activeStep.startDateModel.isOpen"
min-date="activeStep.startDateModel.minDate"
max-date="activeStep.startDateModel.maxDate"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="activeStep.startDateModel.openStartDatePopup($event)"><i
class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<!-- First days of week -->
<div class="form-group">
<label class="col-md-4 control-label" for="buttondropdown">
First day of the week
</label>
<div class="col-md-1">
<div class="btn-group" dropdown is-open="activeStep.firstDayOfWeekIsOpen">
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
{{activeStep.selectedFirstDayOfWeek}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="item in activeStep.firstDaysOfWeek">
<a ng-click="activeStep.setFirstDayOfWeek(item)">{{item}}</a>
</li>
</ul>
</div>
</div>
</div>
</fieldset>
</form>
</p>
</div>
</body>
</html>
最佳答案
这是因为您的“开始日期”和“结束日期”输入包含在 <p> 中。它添加了相当于 margin-bottom: 10px; 的内容到输入。
要解决此问题，只需更改两个 <p class="input-group">至<div class="input-group"> .
<强> Updated Plunker
关于twitter-bootstrap - 使用 bootstrap 形成组类之间不同的垂直间隙，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25514567/