Question

我在调整表单组件方面遇到了麻烦如您所见，日期时间选择器与cooptation输入不对齐

<div class="form-group">
  <div class="col-md-6">
    <label class="col-md-4 control-label" for="field_nom">Nom</label>
    <div class="col-md-8">
      <input type="text" class="form-control" name="nom" id="field_nom" ng-model="vm.consultant.nom" required />
    </div>
  </div>
  <div class="col-md-6">
    <label class="col-md-5 control-label" for="field_dateEnregistrement">Date Enregistrement</label>
    <div class="col-md-5 input-group">
      <input id="field_dateEnregistrement" type="text" class="form-control" name="dateEnregistrement" uib-datepicker-popup="{{dateformat}}" ng-model="vm.consultant.dateEnregistrement" is-open="vm.datePickerOpenStatus.dateEnregistrement" />
      <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="vm.openCalendar('dateEnregistrement')"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
    </div>
  </div>

</div>
<div class="form-group">
  <div class="col-md-6">
    <label class="col-md-4 control-label" for="field_candidat">Candidat</label>
    <div class="col-md-8">
      <input type="checkbox" class="form-control" name="candidat" id="field_candidat" ng-model="vm.consultant.candidat" />
    </div>
  </div>
  <div class="col-md-6">
    <label class="col-md-5 control-label" for="field_cooptation">Cooptation</label>
    <div class="col-md-7">
      <input type="text" class="form-control" name="cooptation" id="field_cooptation" ng-model="vm.consultant.cooptation" />
    </div>
  </div>
</div>

https://plnkr.co/edit/ZYLQAtRlWqkwh53Pm7XK?p=preview

如何垂直对齐这些组件？

[更新]
解决了：

<div class="col-md-6">
                    <label class="col-md-5 control-label" for="field_dateEnregistrement">Date Enregistrement</label>
                    <div class="col-md-5">
                        <div class="input-group"> 
                            <input id="field_dateEnregistrement" type="text" class="form-control" name="dateEnregistrement" uib-datepicker-popup="{{dateformat}}" ng-model="vm.consultant.dateEnregistrement" is-open="vm.datePickerOpenStatus.dateEnregistrement"/>
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default" ng-click="vm.openCalendar('dateEnregistrement')"><i class="glyphicon glyphicon-calendar"></i></button>
                            </span>
                        </div>
                    </div>
                </div>

Answer 1

您可以在CSS文件中使用元素id的边距（我还添加了宽度以使其宽度与下面的形式一样）你可能想要删除它

#field_dateEnregistrement { 
margin-left:14px;
width:211px;
}

UI bootstrap：垂直对齐datetimepicker

1 个答案: