AngularJs，Bootstrap 模态表单无法正确查看

Question

当我运行代码时，它可以工作，但我可以得到我想要的输出。代码在这里https://jsfiddle.net/RLQhh/6357/

<div class="modal fade" id="signup" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
    <div class="modal-content">
        <form name="registration" ngnovalidate="" class="ng-pristine ng-invalid ng-invalid-required ng-valid-pattern ng-valid-email ng-valid-minlength">
        <div class="modal-header ng-scope">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="modal-title">Registration</h4>
        </div>
        <div class="modal-body ng-scope" id="modalbody">

            <div class="col-sm-offset-1 col-sm-10">
                <input type="text" name="username" id="username" placeholder="Username" ng-model="user.username" ng-required="true" ng-pattern="/^[a-zA-Z0-9]*$/" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern" required="required"><br>
                <p ng-show="registration.username.$touched &amp;&amp; registration.username.$error.required" class="ng-hide">Please enter a Username!</p>
                <p ng-show="registration.username.$error.pattern" class="ng-hide">Please enter a Valid Username (No special characters)!</p>


                <input type="email" name="email" id="email" placeholder="Email" ng-model="user.email" ng-required="true" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" class="ng-pristine ng-untouched ng-empty ng-valid-email ng-invalid ng-invalid-required ng-valid-pattern" required="required"><br>
                <p ng-show="registration.email.$invalid &amp;&amp; registration.email.$touched" class="ng-hide">Please enter a valid email!</p>


                <input type="password" name="password1" id="password1" placeholder="Password" ng-model="user.password1" ng-required="true" ng-minlength="6" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-minlength" required="required"><br>
                <p ng-show="registration.password1.$invalid &amp;&amp; registration.password1.$touched" class="ng-hide">Passwords must be at least 6 characters!</p>

                <input type="password" name="password2" id="password2" placeholder="Confirm Password" ng-model="user.password2" ng-required="true" ng-minlength="6" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-minlength" required="required"><br>
                <p ng-show="registration.password2.$invalid &amp;&amp; registration.password2.$touched" class="ng-hide">Passwords must be at least 6 characters!</p>
            </div>




        </form>
        </div>
            <div class="modal-footer">
                <input type="submit" class="btn btn-primary" ng-click="submit(user)">
            </div>
    </div>
</div>

我希望表单看起来居中并位于正确的页眉正文页脚部分。相反，每次我更改代码或 css 时，表单都会从正文中删除，并且页脚变得很遥远。我不确定这是否是因为我使用 Bootstrap 和 angularjs。

Answer 1

<div class="modal fade" id="signup" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">

            <div class="modal-header ng-scope">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modal-title">Registration</h4>
            </div>
            <div class="modal-body ng-scope" id="modalbody">
                <form name="registration" ngnovalidate="" class="ng-pristine ng-invalid ng-invalid-required ng-valid-pattern ng-valid-email ng-valid-minlength">
                    <div class="col-sm-offset-1 col-sm-10">
                        <input type="text" name="username" id="username" placeholder="Username" ng-model="user.username" ng-required="true" ng-pattern="/^[a-zA-Z0-9]*$/" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern" required="required"><br>
                        <p ng-show="registration.username.$touched &amp;&amp; registration.username.$error.required" class="ng-hide">Please enter a Username!</p>
                        <p ng-show="registration.username.$error.pattern" class="ng-hide">Please enter a Valid Username (No special characters)!</p>


                        <input type="email" name="email" id="email" placeholder="Email" ng-model="user.email" ng-required="true" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" class="ng-pristine ng-untouched ng-empty ng-valid-email ng-invalid ng-invalid-required ng-valid-pattern" required="required"><br>
                        <p ng-show="registration.email.$invalid &amp;&amp; registration.email.$touched" class="ng-hide">Please enter a valid email!</p>


                        <input type="password" name="password1" id="password1" placeholder="Password" ng-model="user.password1" ng-required="true" ng-minlength="6" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-minlength" required="required"><br>
                        <p ng-show="registration.password1.$invalid &amp;&amp; registration.password1.$touched" class="ng-hide">Passwords must be at least 6 characters!</p>

                        <input type="password" name="password2" id="password2" placeholder="Confirm Password" ng-model="user.password2" ng-required="true" ng-minlength="6" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-minlength" required="required"><br>
                        <p ng-show="registration.password2.$invalid &amp;&amp; registration.password2.$touched" class="ng-hide">Passwords must be at least 6 characters!</p>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <input type="submit" class="btn btn-primary" ng-click="submit(user)">
            </div>
        </div>
    </div>
</div>

在那里检查表单的开始/结束标签。

Answer 2

我稍微更改了您的代码。我认为你把你的方式错了。试试这个：

<div class="modal fade" id="signup" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">

            <div class="modal-header ng-scope">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modal-title">Registration</h4>
            </div>
            <div class="modal-body ng-scope" id="modalbody">
                <div class="row">
                    <form name="registration" ngnovalidate=""
                          class="ng-pristine ng-invalid ng-invalid-required ng-valid-pattern ng-valid-email ng-valid-minlength">
                        <div class="col-sm-offset-1 col-sm-10">
                            <input type="text" name="username" id="username" placeholder="Username"
                                   ng-model="user.username"
                                   ng-required="true" ng-pattern="/^[a-zA-Z0-9]*$/"
                                   class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern"
                                   required="required"><br>

                            <p ng-show="registration.username.$touched &amp;&amp; registration.username.$error.required"
                               class="ng-hide">Please enter a Username!</p>

                            <p ng-show="registration.username.$error.pattern" class="ng-hide">Please enter a Valid
                                Username
                                (No special characters)!</p>


                            <input type="email" name="email" id="email" placeholder="Email" ng-model="user.email"
                                   ng-required="true" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/"
                                   class="ng-pristine ng-untouched ng-empty ng-valid-email ng-invalid ng-invalid-required ng-valid-pattern"
                                   required="required"><br>

                            <p ng-show="registration.email.$invalid &amp;&amp; registration.email.$touched"
                               class="ng-hide">
                                Please enter a valid email!</p>


                            <input type="password" name="password1" id="password1" placeholder="Password"
                                   ng-model="user.password1" ng-required="true" ng-minlength="6"
                                   class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-minlength"
                                   required="required"><br>

                            <p ng-show="registration.password1.$invalid &amp;&amp; registration.password1.$touched"
                               class="ng-hide">Passwords must be at least 6 characters!</p>

                            <input type="password" name="password2" id="password2" placeholder="Confirm Password"
                                   ng-model="user.password2" ng-required="true" ng-minlength="6"
                                   class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-minlength"
                                   required="required"><br>

                            <p ng-show="registration.password2.$invalid &amp;&amp; registration.password2.$touched"
                               class="ng-hide">Passwords must be at least 6 characters!</p>
                        </div>

                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <input type="submit" class="btn btn-primary" ng-click="submit(user)">
            </div>
        </div>
    </div>
</div>

希望对你有帮助...