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

这是因为表单输入显示为块，因此类＆＃34; text-center＆＃34;仅影响内联元素

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

查看此示例： http://getbootstrap.com/examples/signin/

或许您可以使用bootstrap中的偏移类 http://getbootstrap.com/css/#grid-offsetting

干杯

bootstrap asp.net文本框不能正确居中

1 个答案: