水平ラジオボタンでラベルを整列する

私の課題の1つでは、フォームの検証を行う必要があります。星数のラベルがラジオボタンと揃っていないという事実を除いて、すべてが問題ありません。私はあなたにコードを提供しています。水平ラジオボタンでラベルを整列する

<form class="form-horizontal" name="commentForm" ng-submit="submitComment()" novalidate> 
       <div class="form-group" ng-class="{ 'has-error': 
        commentForm.author.$error.required && 
        !commentForm.author.$pristine }"> 
        <label for="author" class="col-sm-2 control-label">Name</label> 
         <div class="col-sm-10"> 
          <input type="text" class="form-control" id="author" 
          name="author" placeholder="Enter Name" 
          ng-model="userComment.author" required> 
          <span ng-show="feedbackForm.emailid.$invalid && !feedbackForm.emailid.$pristine" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> 
          <span ng-show="commentForm.author.$error.required && 
           !commentForm.author.$pristine" class="help-block"> 
           Your name is required. 
          </span> 
         </div> 
       </div> 
       <div class="form-group"> 

        <label class="col-sm-3 control-label">Number of stars</label> 
         <div class="radio col-sm-9"> 
           <label class="radio-inline control-label"> 
            <input type='radio' name="rating" value="1" ng-model="userComment.rating">1 
           </label> 

           <label class="radio-inline control-label"> 
            <input type='radio' name="rating" value="2" ng-model="userComment.rating">2 
           </label> 

           <label class="radio-inline control-label"> 
            <input type='radio' name="rating" value="3" ng-model="userComment.rating">3 
           </label> 

           <label class="radio-inline control-label"> 
            <input type='radio' name="rating" value="4" ng-model="userComment.rating">4 
           </label> 

           <label class="radio-inline control-label"> 
            <input type='radio' name="rating" value="5" ng-model="userComment.rating" checked>5 
          </label> 
         </div> 
       </div> 
      <div class="form-group" ng-class="{ 'has-error': 
        commentForm.comment.$error.required && 
        !commentForm.comment.$pristine }"> 
        <label for="comment" class="col-sm-2 control-label">Comment</label> 
        <div class="col-sm-10"> 
         <textarea class="form-control" name="comment" rows="6" ng-model="userComment.comment" required> 
         </textarea> 
         <span ng-show="commentForm.comment.$error.required && 
          !commentForm.comment.$pristine" class="help-block"> 
          Your comment is required. 
         </span> 
        </div> 
      </div> 
      <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10"> 
         <button type="submit" class="btn btn-primary" 
          ng-disabled="commentForm.$invalid">Send Comment</button> 
        </div> 
      </div> 
     </form>

任意のアイデア？

ありがとうございます。

PS。 ng-show、ng-click、ng-modelなどの異なるディレクティブについて心配する必要はありません。

出典

2017-02-24 Theo

変更：

<label class="col-sm-3 control-label">Number of stars</label> 
     <div class="radio col-sm-9">

へ：

<label class="col-sm-2 control-label">Number of stars</label> 
     <div class="col-sm-10">

出典

2017-02-24 09:48:27 Option

this--がちょうどラベルの位置を見てのようにあなたはそれを揃えることができます。

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      <style type="text/css"> 
 
      
 
      </style> 
 
      </head> 
 
      <body> 
 
      <form class="form-horizontal" name="commentForm" ng-submit="submitComment()" novalidate> 
 
        <div class="form-group" ng-class="{ 'has-error': 
 
         commentForm.author.$error.required && 
 
         !commentForm.author.$pristine }"> 
 
         <label for="author" class="col-sm-2 control-label">Name</label> 
 
          <div class="col-sm-10"> 
 
           <input type="text" class="form-control" id="author" 
 
           name="author" placeholder="Enter Name" 
 
           ng-model="userComment.author" required> 
 
           <span ng-show="feedbackForm.emailid.$invalid && !feedbackForm.emailid.$pristine" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> 
 
           <span ng-show="commentForm.author.$error.required && 
 
            !commentForm.author.$pristine" class="help-block"> 
 
            Your name is required. 
 
           </span> 
 
          </div> 
 
        </div> 
 
        <div class="form-group"> 
 
         
 
         
 
          <div class="radio col-sm-9"> 
 
          <label class="col-sm-3 control-label">Number of stars</label> 
 
            <label class="radio-inline control-label"> 
 
             <input type='radio' name="rating" value="1" ng-model="userComment.rating">1 
 
            </label> 
 

 
            <label class="radio-inline control-label"> 
 
             <input type='radio' name="rating" value="2" ng-model="userComment.rating">2 
 
            </label> 
 

 
            <label class="radio-inline control-label"> 
 
             <input type='radio' name="rating" value="3" ng-model="userComment.rating">3 
 
            </label> 
 

 
            <label class="radio-inline control-label"> 
 
             <input type='radio' name="rating" value="4" ng-model="userComment.rating">4 
 
            </label> 
 

 
            <label class="radio-inline control-label"> 
 
             <input type='radio' name="rating" value="5" ng-model="userComment.rating" checked>5 
 
           </label> 
 
          </div> 
 
        </div> 
 
       <div class="form-group" ng-class="{ 'has-error': 
 
         commentForm.comment.$error.required && 
 
         !commentForm.comment.$pristine }"> 
 
         <label for="comment" class="col-sm-2 control-label">Comment</label> 
 
         <div class="col-sm-10"> 
 
          <textarea class="form-control" name="comment" rows="6" ng-model="userComment.comment" required> 
 
          </textarea> 
 
          <span ng-show="commentForm.comment.$error.required && 
 
           !commentForm.comment.$pristine" class="help-block"> 
 
           Your comment is required. 
 
          </span> 
 
         </div> 
 
       </div> 
 
       <div class="form-group"> 
 
         <div class="col-sm-offset-2 col-sm-10"> 
 
          <button type="submit" class="btn btn-primary" 
 
           ng-disabled="commentForm.$invalid">Send Comment</button> 
 
         </div> 
 
       </div> 
 
       </form> 
 
      
 
    </body> 
 
    </html>

出典

2017-02-24 09:51:49 neophyte

水平ラジオボタンでラベルを整列する

答えて

関連する問題