Центральная горизонтальная форма в бутстрапе 3

Как бы разместить горизонтальную форму в бутстрапе 3.2? (в отношении контейнера формы).Центральная горизонтальная форма в бутстрапе 3

Вы можете увидеть мой пример в http://www.bootply.com/odXfJPlHRV

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="signup" style="width:800px;border:1px solid black"> 
 
<form class="form-horizontal no-margin center-block"> 
 
    <div class="form-group center-block"> 
 
     <label for="inputEmail" class="control-label col-xs-2">Email</label> 
 
     <div class="col-xs-2"> 
 
      <input type="email" class="form-control" id="inputEmail" placeholder="Email"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="inputPassword" class="control-label col-xs-2">Password</label> 
 
     <div class="col-xs-2"> 
 
      <input type="password" class="form-control" id="inputPassword" placeholder="Password"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group last-form-group"> 
 
     <div class="col-xs-offset-2 col-xs-2"> 
 
      <button type="submit" class="btn btn-primary">Create an account</button> 
 
     </div> 
 
    </div> 
 
</form> 
 
</div>

источник

2014-09-23 Wesley

по отношению к чему? страница, родительский div? ширина, высота, ширина и высота? быть более конкретным ... и, что вы пробовали? – henser

В отношении контейнера формы. – Wesley

http://stackoverflow.com/questions/12172651/how-to-center-form-in-twitter-bootstrap – hakiko

Использование:

margin:0 auto;

в CSS в контейнере?

http://www.bootply.com/drEdh7T8Cd

или форму в DIV:

http://www.bootply.com/AlDBmmEtin

источник

2014-09-23 12:43:24

Это, к сожалению, не сосредотачивает его вообще. – Wesley

Вы пытаетесь центрировать div или центр формы внутри div? –

Форма в div, извините за путаницу. – Wesley

своп классы с .col-xs-2 для .col-xs-6.

Затем нанесите text-align: right; на <label> и text-align:left; и установить фиксированную width к <input>

Если вы хотите добавить больше пространства между этикеткой - вход добавить col-xs-offset-*

Проверьте, чтобы увидеть, если это предполагаемый результат:

BOOTPLY DEMO

источник

2014-09-23 12:47:48 henser

Не работает, теперь ярлык начинается в центре, но я хочу, чтобы контент был центрирован. – Wesley

добавил демо к OP ... проверьте, является ли это предполагаемым результатом – henser

На подходе будет использовать col-*-offset-* classes, чтобы сдвинуть метки и кнопку вправо, чтобы получить ее по центру - Bootply example.

В этом случае, где каждая метка и ввод имеют .col-xs-2, там будет 6 доступных колонок. Таким образом, вы могли бы использовать col-xs-offset-3 следующим образом:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="signup"> 
 
<form class="form-horizontal no-margin"> 
 
    <div class="form-group"> 
 
     <label for="inputEmail" class="control-label col-xs-offset-3 col-xs-2">Email</label> 
 
     <div class="col-xs-2"> 
 
      <input type="email" class="form-control" id="inputEmail" placeholder="Email"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="inputPassword" class="control-label col-xs-offset-3 col-xs-2">Password</label> 
 
     <div class="col-xs-2"> 
 
      <input type="password" class="form-control" id="inputPassword" placeholder="Password"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group last-form-group"> 
 
     <div class="col-xs-offset-5 col-xs-2"> 
 
      <button type="submit" class="btn btn-primary">Create an account</button> 
 
     </div> 
 
    </div> 
 
</form> 
 
</div>

источник

2014-09-23 12:51:14

-1

<div class="row_fluid"> 
 
     <div class="span3">&nbsp; </div> 
 
     <div class="span6"> Add your form in here </div> 
 
     <div class="span3">&nbsp; </div> 
 
    </div>

источник

2014-09-24 11:20:32 Tohir

Центральная горизонтальная форма в бутстрапе 3

ответ

Смежные вопросы