Я хочу, чтобы моя форма Bootstrap была выровнена по центру, я использовал стандартные классы BS Form, но форма всегда выровнена по левому краю
Я использовал различные классы для поля:0 авто, и для выравнивания по центру, но не работал.
<div class="container">
<div class="col-md-12 newsletter">
<form action="#" method="post">
<div class="form-group col-md-6 col-xs-10 col-sm-10 col-lg-4">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="clearfix"></div>
<div class="form-group col-md-6 col-xs-10 col-sm-10 col-lg-4">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
</form>
</div>
</div>
2 ответа
Вы можете добавить -offset- class к div с помощью col-классов. Например:
<div class="form-group col-md-offset-4 col-md-6 col-xs-10 col-sm-10 col-lg-4">
col-md-offset-4 добавит дополнительное пространство, поэтому ввод с меткой будет центрирован. Для получения дополнительной информации прочитайте эту документацию
UPD Вы также можете использовать flexbox. Примените этот стиль CSS к своему коду:
.newsletter {
display: flex;
justify-content: center;
}
Но имейте в виду, что вам нужно будет удалить классы начальной загрузки (col-md, col-xs и т. Д.) Из div с именем класса form-group. Вы можете посмотреть рабочий пример с flexbox здесь
HTML:
<div class="container">
<div class="col-md-12 newsletter">
<form action="#" method="post">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="clearfix"></div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
</form>
</div>
</div>
CSS:
.newsletter {
display: flex;
justify-content: center;
}
Попробуй это:
Проверьте Демо здесь
HTML:
<div class="container">
<div class="row">
<div class="section-form">
<div class="col-md-12 newsletter">
<form action="#" method="post">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="clearfix"></div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
</form>
</div>
</div>
</div>
</div>
CSS:
.section-form {
max-width:550px;
margin:auto;
}