Question

看到这个plunker：

我正在使用Bootstrap 3.x：我有4个div与类form-group。

这些`form-group`之间的差距是相同的，除了在schoolyear名称和开始日期之间，它只有一半，并且在所有当前浏览器上都有相同的错误差距。那是为什么？

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

Answer 1

这是因为您的“开始日期”和“结束日期”输入包含在<p>中，这会在输入中添加等效的margin-bottom: 10px;。

要解决此问题，只需将两个<p class="input-group">更改为<div class="input-group">。

<强> Updated Plunker

表单组类与引导程序之间的不同垂直间隙

1 个答案: