标签和文本框的对齐方式

Question

我再次面对这个问题，我无法纠正这种情况。我不知道我错过了什么。请找到plunkr [https://plnkr.co/edit/UD0YZQhgOjIoJ1nqg7sb?p=preview]。请为我获得的实际输出最大化plunkr输出。有人帮忙吗？

Html代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-controller="headerCtrl">
  <div class="container" style="padding-top:20px;">
    <div ng-app="TimeSheet" data-ng-controller="headerCtrl" class="container" style="margin-top:60px">
      <div ng-show="error" class="alert alert-danger alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <p>{{ error }}</p>
      </div>
      <!--<p><a data-ng-click="showadd()" href="javascript:;" class="btn btn-primary">Generate Report</a></p>-->
      <div class="panel panel-default">
        <div class="panel-body">
          <section>
            <div class="row">
              <div class="col-md-8 col-md-offset-2">
                <div class="form-horizontal">

                  <div class="form-group">
                    <label for="title" class="col-sm-5 control-label">UserID</label>
                    <div class="col-sm-4">
                      <select data-ng-model="user.userid" class="form-control" id="title" required>
                        <option value="" selected="selected">(Select User ID)</option>
                        <option value="user1">user1</option>
                        <option value="user2">user2</option>
                        <option value="user3">user3</option>
                        <option value="user4">user4</option>
                      </select>

                      <!--<input type="text" data-ng-model="user.userid" class="form-control" id="title" placeholder="Enter your User ID" required title="Enter your UserID" />-->
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="title" class="col-sm-5 control-label">Status</label>
                    <div class="col-sm-4">
                      Active
                      <input name="Status" type="radio" data-ng-model="user.ResultStatus" value="Active" required title="Choose status">&nbsp;&nbsp;&nbsp; In-Active
                      <input name="Status" type="radio" data-ng-model="user.ResultStatus" value="InActive" required title="Choose status">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="startDate" class="col-sm-5 control-label">Date</label>
                    <div class="col-sm-4">
                      <input name="startDate" data-ng-model="user.date" id="startDate" class="date-picker" required />
                      <!--<input type="text" data-ng-model="user.projectid" class="form-control" id="title" placeholder="Enter your Project ID" required title="Enter your ProjectID" />-->
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-4 col-sm-4">
                      <span data-ng-hide="editMode">
                                                    <input type="submit" value="Generate" ng-disabled="adduserform.$invalid" data-ng-click="add()" class="btn btn-primary" />
                                                </span>
                      <span data-ng-show="editMode">
                                                    <input type="submit" value="Update" ng-disabled="adduserform.$invalid" data-ng-click="update()" class="btn btn-primary" />
                                                </span>
                      <input type="button" value="Cancel" data-ng-click="cancel()" class="btn btn-primary" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>

您可以在下面的图片中看到对齐问题

Answer 1

要使日期输入跨越整个宽度，您需要.form-control类。

<input name="startDate" data-ng-model="user.date" id="startDate" class="form-control date-picker" required />

另请注意，<input>标记必须包含type属性。

您的时间表div中的容器中有一个容器。从时间表div中删除.container类可修复对齐问题。

另外，将<table>放在一行和一列中：

<div class="row">
    <div class="col-md-12">

        <!-- Your table here -->
        <table class="table table-hover">
            ...
        </table>

    </div>
</div>

See it working here