Выравнивание метки и текстового поля

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> тег должен иметь атрибут типа с ним.

У вас есть контейнер в контейнере для вашего расписания. Удаление класса .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.