Как горизонтальный центр формы с помощью BootStrap?

Question

Привет там я пытаюсь позиционировать форму для входа в середине экрана, используя Bootstrap 2. Я попытался несколько комбинаций с использованием смещения и т.д. Но я, кажется, не имеют Ану удачи ..

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

Любой предложения о том, как я могу это достичь?

Answer 1

Просто установите классы так, чтобы 2 * offsetClass + span class = 12 столбцов.

т.е. .offset4.span4

Answer 2

, если вы хотите использовать запуск системы сетки, следуя @ ответ Рассол в. Это будет центрировать развернутые столбцы, которые содержат вашу форму. Если вы хотите, чтобы форма была сосредоточена в этом промежутке, вам нужно будет сделать немного больше работы, например, вещи, упомянутые @kajo в его комментарии к вашему вопросу.

Чтобы уточнить ответ @ Pickle, вот пример кода, который центрирует диапазон из 4 столбцов в сетке по 12 столбцов по умолчанию. Если вам нужно другое количество столбцов натянутого, используйте @ формулу Рассола в (но имейте в виде, ваше число объединенных колонн должно быть четным числом)

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

Answer 3

К сожалению, в настоящее время класс смещения не работает должным образом внутри рядно-жидкостный элемент.

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

Если вы хотите использовать строку жидкости элемента, вы можете добавить span4 с брами тегом в нем до вашего контента дел.

Answer 4

После борьбы столько с этой центральной проблемой, мне удалось создать свой собственный 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> 

Теперь окончательно навсегда центрированные даже при изменении размера браузера (Chrome и Firefox)

Answer 5

Обычно все пролеты перемещаются влево. Таким образом, вы должны плавать на нем до нуля, а затем устанавливать маржу в auto.

Что-то вроде этого:

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