Question

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

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

Answer 1

变化：

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

Answer 2

您可以像这样对齐 - 只需看一下标签的位置。

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

将标签与水平单选按钮对齐

2 个答案: