Bootstrap asp.net Textbox zentriert nicht richtig

Question

Ich habe ein Login-Formular und ich versuche, alle meine Etiketten und Textfelder zu zentrieren. Ich habe die Etiketten richtig ausgerichtet und scheint reaktionsschnell zu arbeiten, wenn ich mein Fenster neu skaliere.

Allerdings zentrieren meine Textfelder überhaupt nicht, unabhängig von der Bildschirmauflösung.

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

So sieht es aus..und aus irgendeinem Grund zieht es ständig auf die linke Seite.

Wie kann ich meine Textfelder richtig ausrichten und halten sie in Reaktion Bootstrap-Klassen?

Answer 1

Dies geschieht, weil die Formulareingaben als Block angezeigt werden, so dass die Klasse „text-Zentrum“ wirken sich nur auf Inline-Elemente

Sie eine wraper für das gesamte Formular verwenden und stellen Sie dann eine feste Breite mit margin:0 auto; Eigenschaft.

dieses Beispiel Siehe: http://getbootstrap.com/examples/signin/

Oder vielleicht können Sie den Offset-Klasse von Bootstrap http://getbootstrap.com/css/#grid-offsetting

Prost