Как центрировать форму в twitter bootstrap?
<div class="container">
<div class="row">
<div class="span6 center">
<form>
<table>
<tbody>
<td>foo</td>
</tbody>
</table>
</form>
</div>
</div>
</div>
JSfiddle
Примечание. Я использую абстрактный слой, поэтому не могу изменить класс <form>
.
Как получить форму с помощью Twitter-Bootstrap?
FYI: Я также пробовал с pagination-centred
.
Ответы
Ответ 1
Оба опубликованных ответа действительны и работают, поэтому я их поддержал. Вот еще один метод, который я не видел.
Вы можете центрировать форму, установив ее на display:inline-block
и центрируя ее в контейнере .center
, используя text-align:center
. Таким образом, форма будет центрировать независимо от ширины внутри этого контейнера:
CSS
.center {
text-align:center;
}
.center form {
display:inline-block;
}
Ответ 2
Нативный способ позиционирования элементов в Bootstrap использует offset
. Я предполагаю, что вы используете раскладку из 12 столбцов.
Bootstrap 2
<div class="container">
<div class="row">
<div class="span6 offset3">
<form>
...
</form>
</div>
</div>
</div>
Дополнительная информация в документации
Bootstrap 3
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form>
...
</form>
</div>
</div>
</div>
Дополнительная информация в документации
Ответ 3
Вот где я нашел свой ответ.
fooobar.com/questions/14959/...
<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>
и CSS:
[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}
Ответ 4
Вы пробовали это?
.center form {
display: table;
margin: 0 auto;
}
Это легкое и быстрое решение для меня.
Ответ 5
Ничего подобного хорошего CSS?
.center > form {
width: 300px; // some amount to prevent using 100% width
margin: 0 auto;
}
И измените .span6
на .span12
Jsfiddle здесь.
Ответ 6
<div class="container">
вы кодируете форму
</div>