bootstrap asp.net 文本框未正确居中

Question

我有一个登录表单，我正在尝试将所有标签和文本框居中。我的标签正确对齐，并且在我重新调整窗口大小时似乎可以响应。

但是，无论屏幕分辨率如何，我的文本框都没有居中。

<div id="login" class="container">
    <div class="row">

        <div class="col-xs-12 text-center form-group">

            <h3>Login</h3>

            <!--username-->
            <asp:Label ID="lblUsername" runat="server" Text="Username" CssClass="label label-default"></asp:Label>
            <div class="">
                <asp:TextBox ID="txtUsername" runat="server" Width="170px" CssClass="form-control"></asp:TextBox>
                <asp:RequiredFieldValidator ID="rfvUsername" runat="server"
                    ControlToValidate="txtUsername"
                    ErrorMessage="Please enter your username."
                    ForeColor="Red">
                </asp:RequiredFieldValidator>
            </div>

            <!--password-->
                <asp:Label ID="lblPassword" runat="server" Text="Password" CssClass="label label-default"></asp:Label>
                <div class="">
                    <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Width="170px" CssClass="form-control"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="rfvPassword" runat="server"
                        ControlToValidate="txtPassword"
                        ErrorMessage="Please enter your password."
                        ForeColor="Red">
                    </asp:RequiredFieldValidator>
                </div>

            <!--login/cancel buttons-->
            <asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="btn btn-primary top-buffer" />
        </div>
    </div>
</div>

这就是它的样子..由于某种原因，它不断地向左侧拉。

如何正确对齐文本框并使用引导类保持响应？

Answer 1

这是因为表单输入显示为块，因此“文本中心”类仅影响内联元素

您可以为整个表单使用包装器，然后使用margin:0 auto; 属性设置固定宽度。

看这个例子： http://getbootstrap.com/examples/signin/

或者你可以使用 bootstrap 中的 offset 类 http://getbootstrap.com/css/#grid-offsetting

干杯