用水平单选按钮对齐标签

在我的一项任务中，我必须执行一些表单验证。一切都很好，除了星号标签不与单选按钮对齐的事实。我正在为您提供代码。用水平单选按钮对齐标签

<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>

任何想法？

谢谢Theo。

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

用水平单选按钮对齐标签

回答

相关问题