javascript - AngularJs，Bootstrap Modal 表单无法正确查看

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>

我希望表单看起来居中并位于正确的页眉正文页 footer 分。相反，每次我更改代码或 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>

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