bootstrap zentriert alles

Question

Ich habe eine grundlegende Login-Dialogbox im Bootstrap, die auf dem Bildschirm zentriert ist und die Beschriftungen über den Eingabefeldern sind. Alles ist innerhalb des Containers ausgerichtet.

Wenn ich den Browser größer mache wrap die Etiketten mit dem Textfeld, aber sie waren umwickelt, so dass es größer zu werden, änderte ich meine Col-md-3 zu einem Col-MD-5, die es behoben , aber jetzt, wenn ich die Größe des Browsers ändere, zentrieren sich der Text und der Knopf auf der Seite, anstatt linksbündig zu sein. Wie höre ich das auf, da ich nicht sicher bin, welche Bootstrap CSS zu überschreiben oder Klassen zu verwenden. Ich habe versucht, 'Alight-Left' Klasse, aber es hat nicht viel getan?

Um ehrlich zu sein, wäre ich glücklich mit dann alle in separaten Zeilen unabhängig, aber ich bin mir nicht sicher, wie das zu beheben.

<div class="container body-content" > 
<section id="loginForm"> 
    <form action="superLogin.asp" class="form-horizontal" method="post" role="form"> 
     <div class="form-group"> 
      <label class="col-md-5 control-label" for="username">Supervisor ID</label> 
      <div class="col-md-10"> 
       <input class="form-control" data-val="true" data-val-required="The User ID field is required." id="username" name="username" type="text" value="" /> 
       <span class="field-validation-valid text-danger" data-valmsg-for="username" data-valmsg-replace="true"></span> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-md-5 control-label" for="Password">Password</label> 
      <div class="col-md-10"> 
       <input class="form-control" data-val="true" data-val-required="The Password field is required." id="password" name="password" type="password" /> 
       <span class="field-validation-valid text-danger" data-valmsg-for="password" data-valmsg-replace="true"></span> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-offset-5 col-md-10"> 
       <input type="submit" value="Log in" class="btn btn-default" /> 
      </div> 
     </div> 
    </form>   
</section> 
</div> 

eine Geige kann hier gefunden werden: https://jsfiddle.net/bmcmecbf/

den Ausgabebereich die Größe der Wirkung

Answer 1

Ihre Spalten nicht gleich 12 auf einer bestimmten Zeile zu sehen, Sie müssen Sie sicherstellen, dass jede Zeile gleich 12 Spalten ist, Ihre Spalten sind gleich 15. Ich habe Ihre Spaltenklassen kopiert und geändert, so dass sie gleich 12 sind. Wie es so ist, werden die Spalten aus dem Fluss fallen und wickle auf eine neue Zeile, die es so aussehen lässt, als wären die Labels zentralisiert, obwohl sie es nicht sind; Es ist die Spalte, in der sie sitzen und das Problem verursachen col-md-5. Ihnen fehlt auch die Zeilenklasse in Ihrem Code, den ich hinzugefügt habe. Dadurch erhalten Sie das richtige Verhalten/Ergebnis.

<div class="container body-content"> 
    <div class="row"> 
    <section id="loginForm"> 
     <form action="superLogin.asp" class="form-horizontal" method="post" role="form"> 
     <div class="form-group"> 
      <label class="col-md-3 control-label" for="username">Supervisor ID</label> 
      <div class="col-md-9"> 
       <input class="form-control" data-val="true" data-val-required="The User ID field is required." id="username" name="username" type="text" value="" /> 
       <span class="field-validation-valid text-danger" data-valmsg-for="username" data-valmsg-replace="true"></span> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-md-3 control-label" for="Password">Password</label> 
      <div class="col-md-9"> 
       <input class="form-control" data-val="true" data-val-required="The Password field is required." id="password" name="password" type="password" /> 
       <span class="field-validation-valid text-danger" data-valmsg-for="password" data-valmsg-replace="true"></span> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-offset-3 col-md-9"> 
       <input type="submit" value="Log in" class="btn btn-default" /> 
      </div> 
     </div> 
     </form>   
    </section> 
    </div> 
</div> 

Wenn Sie möchten, dass sie sich in separaten Zeilen befinden, ändern Sie die Spaltenklassen in col-md-12.

<div class="form-group"> 
    <label class="col-md-12 control-label" for="username"> 
    Supervisor ID 
    </label> 
    <div class="col-md-12"> 
     <input class="form-control" data-val="true" data-val-required="The User ID field is required." id="username" name="username" type="text" value="" /> 
    </div> 
</div> 

können Sie auch die form-horizontal Klasse entfernen, da es nicht erforderlich sein wird.

Answer 2

aber jetzt, wenn ich die Größe des Browsers ändern, zentrieren sich der Text und die Schaltfläche auf der Seite, anstatt linksbündig zu sein.

Problem: ist mit diesen Zeilen von HTML.

<label class="col-md-5 control-label" for="username">Supervisor ID</label> 
<div class="col-md-10"> 

Nach Bootstrap-Grid-System können Sie bis zu 12 Spalten haben. Aber jetzt haben Sie 15, so dass Ihre divs in die nächste Zeile geschoben werden, anstatt in derselben Zeile zu bleiben.

Lösung: stellen Sie sicher, insgesamt 12 Spalten insgesamt zu haben. So etwas wie

<label class="col-md-4 control-label" for="username">Supervisor ID</label> 
<div class="col-md-8"> 

Answer 3

<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<section id="loginForm"> 
 
    <div class="col-lg-offset-1 col-lg-10 col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-offset-1 col-xs-10"> 
 
    <form action="superLogin.asp" class="form-horizontal" method="post" role="form"> 
 
     
 
    \t \t \t \t \t \t <div class="form-group"> 
 
           <label>Supervider ID</label> 
 
           <input class="form-control" placeholder="ID" type="email"> 
 
          </div> 
 
          <div class="form-group"> 
 
           <label>Password</label> 
 
           <input class="form-control" placeholder="Password" type="text"> 
 
          </div> 
 
          
 
     
 
     \t <div class="form-group"> 
 
      
 
      <input type="submit" value="Log in" class="btn btn-default pull-left" /> 
 
     </div> 
 
    </form>  
 
    </div> 
 
</section>

Hoffnung, das hilft.

Answer 4

Wenn Sie in das Element mit einem Inspektionswerkzeug wie Firebug schauen, sehen Sie, dass sobald Sie die Breite des Bereichs auf einen bestimmten Punkt erweitern, eine @ media Abfrage im Bootstrap einschlägt und Ihr Element richtig ausgerichtet ist (aus irgendeinem Grund). Ich versuchte Text-Links und Pull-Links, aber es hat nicht funktioniert

Answer 5

Bitte versuchen Sie diesen Code unten behoben. Fügen Sie keine col-md-Klassen in label-Tags ein, sondern verwenden Sie sie in div und wickeln Sie die label innerhalb dieses div.

<section id="loginForm"> 
<form action="superLogin.asp" class="form-horizontal" method="post" role="form"> 
    <div class="form-group"> 
     <div class="col-md-12"> 
      <label class="control-label" for="username">Supervisor ID</label> 
     </div> 
     <div class="col-md-12"> 
      <input class="form-control" data-val="true" data-val-required="The User ID field is required." id="username" name="username" type="text" value="" /> 
      <span class="field-validation-valid text-danger" data-valmsg-for="username" data-valmsg-replace="true"></span> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-md-12"> 
      <label class="control-label" for="Password">Password</label> 
     </div> 
     <div class="col-md-12"> 
      <input class="form-control" data-val="true" data-val-required="The Password field is required." id="password" name="password" type="password" /> 
      <span class="field-validation-valid text-danger" data-valmsg-for="password" data-valmsg-replace="true"></span> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-md-12"> 
      <input type="submit" value="Log in" class="btn btn-default" /> 
     </div> 
    </div> 
</form>   
</section>