Jak wyśrodkować formularz za pomocą BootStrap?

Question

Cześć Staram się umieścić formularz logowania na środku ekranu, używając Bootstrap 2. Próbowałem kilka kombinacji offsetowego etc. Ale ja nie wydają się mieć Anu szczęścia ..

<div class="row-fluid"> 
    <form action='' method='POST' id='loginForm' class='form-horizontal' autocomplete='off'> 
    ... 
    </form> 
</div> 

Any sugestie, w jaki sposób mogę to osiągnąć?

Answer 1

Wystarczy ustawić klasy tak, aby 2 * offsetClass + span class = 12 kolumn.

tj: .offset4.span4

Answer 2

jeśli chcesz używać rozpoczęcia sieciowi wykonując @ odpowiedzi w marynacie. Spowoduje to wyśrodkowanie łączonych kolumn zawierających formularz. Jeśli chcesz, aby formularz był wycentrowany w tym przedziale, będziesz musiał wykonać nieco więcej pracy, na przykład rzeczy wymienione przez @kajo w swoim komentarzu do twojego pytania.

Aby opracować odpowiedź @ Pickle, oto przykładowy kod, który centruje rozpiętość 4 kolumn w domyślnej siatce 12-kolumnowej. Jeśli potrzebujesz inną liczbę kolumn trwała, użyj @ wzoru marynowane w (ale należy pamiętać, Twój numer łączony kolumn musi być liczbą parzystą)

<div class="container"> 
    <div class="row"> 
    <div class="offset4 span4"> 
     .. form goes here .. 
    </div> 
    </div> 
</div> 

Answer 3

Niestety, obecnie przesunięcie klasa nie działa prawidłowo wewnątrz płynny element rządowy.

https://github.com/twitter/bootstrap/pull/2394

Jeśli chcesz użyć elementu wiersza płynu można dodać span4 z tagiem br w nim przed zawartości div.

Answer 4

Po zmaga się tyle z tego centrum problemu udało mi się stworzyć własne tweeks

CSS:

.control-group.center{ float:none;margin:0 auto;width:400px;margin-bottom:20px;} 
.control-group .field {width:140px;float:left} 
.control-group .l {width:120px;float:left;line-height: 29px;} 
.row-fluid .offset4{ 
    display: block!important; 
    float: none!important; 
    width: 100%!important; 
    margin-left: 0!important; 
    padding:0 80px; 
} 
@media (max-width: 497px){ 
    .control-group.center {text-align: center;float:inherit;width: auto} 
    .control-group .field,.control-group .l {width:120px;float:none;text-align: center;width: auto} 
} 

HTML:

<div class="container"> 
     <div class="row-fluid"> 
     <div class="offset4 span2"> 

      <form class="form-horizontal" action="enviar-pedido.php" method="post"> 
      <fieldset> 
       <legend>Ingrese sus datos:</legend> 
       <div class="control-group center"> 
       <div class="l">Nombre</div> <div class="field"><input type="text" id="txtNombre" name="txtNombre" placeholder="Nombre"></div> 
       </div> 
       <div class="control-group center"> 
       <div class="l">Email</div> <div class="field"><input type="text" id="txtEmail" name="txtEmail" placeholder="Email"></div> 
       </div> 
       <div class="control-group center"> 
       <div class="l">Teléfono</div> <div class="field"><input type="text" id="txtTelefono" name="txtTelefono" placeholder="Telefono"></div> 
       </div> 
      </fieldset> 
      </form> 
     </div> 
     </div> 
    </div> 

Teraz jest wreszcie zawsze skupionego nawet podczas zmiany rozmiaru przeglądarki (Chrome i Firefox)

Answer 5

Zwykle wszystkie przęsła są unoszone w lewo. Musisz więc unieść go do none, a następnie ustawić margines na auto.

coś takiego:

<div class="span8" style="float:none; margin:0 auto"></div>