html - 标签和跨度的引导模式对齐

Question

我正在尝试让我的标签与我正在填写的跨度对齐。有人能告诉我我在代码中做错了什么没有让它们正确排列吗？跨度看起来比标签高得多，如下图所示。

<div class="modal fade" id="LogInVerification" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">

    <div class="modal-content">
        <form class="form-horizontal" id="VerificationLogin">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="CheckInLabel">Verification</h4>
      </div>
      <div class="modal-body">


          <div class="form-group">
            <label for="CheckInName" class="col-sm-4 control-label">Recording</label>
            <div class="col-sm-6">
              <span id="showRecordingID"></span>
            </div>
          </div>
          <div class="form-group">
            <label for="Branch" class="col-sm-4 control-label">Due On</label>
            <div class="col-sm-6">
              <span id="showWorkDueDate"></span>
            </div>
          </div>

      </div>
      <div class="modal-footer group">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" data-dismiss="modal" class="btn btn-primary verification_accept">Accept</button>
      </div>
            </form>
    </div>
  </div>
</div>

Answer 1

发生这种情况是因为 label 元素 (Bootstrap CSS) 上的 7px padding-top，您可以使用一些 CSS 来解决此问题:

label.col-sm-4.control-label {
  padding-top: 0px;
}

Example Fiddle