标签和跨度的Bootstrap模态对齐

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

这是因为padding-top元素（Bootstrap CSS）上的7px label，你可以用一点CSS解决这个问题：

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

Example Fiddle