在 Bootstrap 中居中表单元素

Question

我有一个有趣的问题。

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

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

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

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

这是JSFiddle

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

还有我的 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

将 text-center 更改为 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>