bootstrap asp.net 文本框未正确居中
[英] bootstrap asp.net textbox does not center properly
本文介绍了bootstrap asp.net 文本框未正确居中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个登录表单,我正在尝试将所有标签和文本框居中.我的标签正确对齐,并且在我重新调整窗口大小时似乎可以响应.
然而,无论屏幕分辨率如何,我的文本框都没有居中.
<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屋!