레이블과 텍스트 상자의 정렬

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한다.