bootstrap asp.net 文本框未正确居中 [英] bootstrap asp.net textbox does not center properly

问题描述

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

然而，无论屏幕分辨率如何，我的文本框都没有居中.

<div class="row"><div class="col-xs-12 text-center form-group"><h3>登录</h3><!--用户名--><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="请输入您的用户名."ForeColor="红色"></asp:RequiredFieldValidator>
<!--密码--><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="请输入您的密码."ForeColor="红色"></asp:RequiredFieldValidator>

<!--登录/取消按钮--><asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="btn btn-primary top-buffer"/>

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

如何使用引导类正确对齐我的文本框并让它们保持响应?

解决方案

出现这种情况是因为表单输入显示为块，所以text-center"类只影响行内元素

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

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

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

干杯

I have a login form and I am trying to center all my labels and textboxes. I have the labels aligning properly and seems to be working responsively when I re-size my window.

However my textboxes are not centering at all, regardless of the screen resolution.

<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>

This is what it looks like..and for some reason it is constantly pulling to the left side.

How can I properly align my textboxes and keep them responsive using bootstrap classes?

解决方案

This happens because the form inputs are displayed as block, so the class "text-center" only affect inline elements

You can use a wraper for your entire form and then set a fixed width with margin:0 auto; property.

See this example: http://getbootstrap.com/examples/signin/

Or maybe you can use the offset class from bootstrap http://getbootstrap.com/css/#grid-offsetting

Cheers

这篇关于bootstrap asp.net 文本框未正确居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！