html - Bootstrap 中的居中表单元素

Question

这里有个有趣的问题。

我在同一个页面上有两个表单，复制并粘贴了完全相同的代码。每个表单都有一个隐藏的输入来识别后端的表单，每个表单都有一个 <input type="submit">提交。

两者唯一的区别是第一种形式少了一个<input type="text"> .

问题是带有 3 <input type="text"> 的表单字段居中，而带有 2 <input type="text"> 的表单不是。当我添加第三个 <input type="text">表格居中。

似乎表单必须有一定数量的输入才能居中。

这是一个JSFiddle

确保拉伸(stretch)浏览器，以便您可以看到顶部表单右侧的空白区域。

还有我的 HTML...

<div class="content-area">
            <div class="row">
                <div class="col-sm-6">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-12 text-center">
                                    <div class="huge">Change Email</div>
                                    <form id="changeEmailForm" method="post" action="/resources/submit.php">
                                        <div class="input-group text-center">
                                            <input type="hidden" name="changeEmail"> <!-- Hidden input to identify the form -->
                                            <input class="form-control input-lg" id="newEmail" name="newEmail" minlength="2" type="text" required placeholder="New Email">
                                            <input class="form-control input-lg" id="confirmEmail" name="confirmEmail" minlength="2" type="text" required placeholder="Confirm Email">
                                            <input class="btn btn-large btn-success" type="submit">
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-12 text-center">
                                    <div class="huge">Change Password</div>
                                    <form id="changePasswordForm" method="post" action="/resources/submit.php">
                                        <div class="input-group text-center">
                                            <input type="hidden" name="changePassword"> <!-- Hidden input to identify the form -->
                                            <input class="form-control input-lg" id="currentPassword" name="currentPassword" minlength="2" type="text" required placeholder="Current Password">
                                            <input class="form-control input-lg" id="newPassword" name="newPassword" minlength="2" type="text" required placeholder="New Password">
                                            <input class="form-control input-lg" id="confirmPassword" name="confirmPassword" minlength="2" type="text" required placeholder="Confirm Password">
                                            <input class="btn btn-large btn-success" type="submit">
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

这是更新的 Fiddle

将文本中心更改为 center-block 将使元素居中。我将它添加到第二个，因为它也不是真正的中心。

<div class="content-area">
    <div class="row">
        <div class="col-sm-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-12 text-center">
                            <div class="huge">Change Email</div>
                            <form id="changeEmailForm" method="post" action="/resources/submit.php">
                                <div class="input-group center-block">
                                    <input type="hidden" name="changeEmail">
                                    <!-- Hidden input to identify the form -->
                                    <!--<input class="form-control input-lg" id="newEmail" name="newEmail" minlength="2" type="text" required placeholder="New Email">-->
                                    <input class="form-control input-lg" id="newEmail" name="newEmail" minlength="2" type="text" required placeholder="New Email">
                                    <input class="form-control input-lg" id="confirmEmail" name="confirmEmail" minlength="2" type="text" required placeholder="Confirm Email">
                                    <input class="btn btn-large btn-success" type="submit">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-12 text-center">
                            <div class="huge">Change Password</div>
                            <form id="changePasswordForm" method="post" action="/resources/submit.php">
                                <div class="input-group center-block">
                                    <input type="hidden" name="changePassword">
                                    <!-- Hidden input to identify the form -->
                                    <input class="form-control input-lg" id="currentPassword" name="currentPassword" minlength="2" type="text" required placeholder="Current Password">
                                    <input class="form-control input-lg" id="newPassword" name="newPassword" minlength="2" type="text" required placeholder="New Password">
                                    <input class="form-control input-lg" id="confirmPassword" name="confirmPassword" minlength="2" type="text" required placeholder="Confirm Password">
                                    <input class="btn btn-large btn-success" type="submit">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>