在我的一项任务中,我必须执行一些表单验证。除了“星号”标签与单选按钮不对齐之外,其他一切都很好。我正在为您提供代码。

https://jsfiddle.net/m8nwnc8a/29/

<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等不同的指令。

最佳答案

更改:

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

关于css - 将标签与水平单选按钮对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42435318/

10-12 12:39
查看更多