ラベルとテキストボックスのアラインメント

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>タグにはタイプ属性が必要です。

あなたのタイムシートのdivのコンテナ内にコンテナがあります。タイムシートdivから.containerクラスを削除すると、配置の問題が修正されます。

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

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

    </div> 
</div> 

See it working here：

はまた、行及び列に<table>を置きます。