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

Question

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

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

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

Answer 1

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

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

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

Answer 2

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

Примерно так:

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

Answer 3

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

, т. Е.: .offset4.span4

Answer 4

После долгих попыток решить этот центральный вопрос мне удалось создать свои собственные твики

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

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

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

Если вы хотите использовать элемент row-Fluid, вы можете добавить span4 с тегом br перед вашим div содержимого.