Bootstrap: Как правильно выровнять кнопку?

111
18

Кнопка в jsFiddle ниже вертикально выровнена с метками. Это выглядит не очень хорошо, и я бы хотел, чтобы он выравнивался с полем выбора.

Как мне это сделать?

jsFiddle

<div class="container">
<form id="bookingForm" class="form-horizontal" method="post">
<div class="form-group">
<div class="col-sm-3">
<label class="control-label">Sender</label>
<select class="form-control">
<option>Choose a sender</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label">Receiver</label>
<select class="form-control">
<option>Choose a receiver</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label">Delivery</label>
<select class="form-control">
<option>Choose a delivery address</option>
</select>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-primary">Manage customers...</button>
</div>
</div>
</form>
</div>

спросил(а) 2021-01-19T14:05:13+03:00 6 месяцев назад
1
Решение
77

Я лично не добавлял бы margin-top, если вы можете этого избежать. Совершенно очевидно, что, когда вы смотрите на него на другом устройстве, вам, вероятно, придется удалить указанную маржу.

Я добавил бы "пустую" метку формы над кнопкой:

<div class="container">
<form id="bookingForm" class="form-horizontal" method="post">
<div class="form-group">
<div class="col-sm-3">
<label class="control-label">Sender</label>
<select class="form-control">
<option>Choose a sender</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label">Receiver</label>
<select class="form-control">
<option>Choose a receiver</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label">Delivery</label>
<select class="form-control">
<option>Choose a delivery address</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label" style="display: block;"> </label>
<button type="button" class="btn btn-primary">Manage customers...</button>
</div>
</div>
</form>
</div>

ответил(а) 2021-01-19T14:05:13+03:00 6 месяцев назад
63

Flexbox, я возвращаюсь к тому, насколько хорошо это снова и снова.

Итак, что мы хотим, если для кнопки двигаться вниз так, чтобы она касалась нижней части блока, а не сверху. Мы могли бы переместить его несколькими способами, но все они полагаются на то, что вы получаете количество пикселей или процентов вправо, и это кажется большим количеством усилий.

Здесь "ленивое" решение flexbox

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
body {
padding-top: 50px;
}
.form-group {
display: flex;
}
.form-group .flex-down {
align-self: flex-end;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<div class="container">
<form id="bookingForm" class="form-horizontal" method="post">
<div class="form-group">
<div class="col-sm-3">
<label class="control-label">Sender</label>
<select class="form-control">
<option>Choose a sender</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label">Receiver</label>
<select class="form-control">
<option>Choose a receiver</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label">Delivery</label>
<select class="form-control">
<option>Choose a delivery address</option>
</select>
</div>
<div class="col-sm-3 flex-down">
<button type="button" class="btn btn-primary">Manage customers...</button>
</div>
</div>
</form>
</div>

Надеюсь, вы сочтете это полезным.

Я добавил это в CSS

.form-group { display: flex; }.form-group.flex-down { align-self: flex-end; }

и класс flex-down до div, содержащего кнопку.

ответил(а) 2021-01-19T14:05:13+03:00 6 месяцев назад
45

Добавьте верхнюю границу 25px к вашей кнопке.

.btn-primary {
margin-top: 25px;
}

ответил(а) 2021-01-19T14:05:13+03:00 6 месяцев назад
45

Вы можете перевести позицию Y с помощью transform: translateY(75%); , Обновленный скрипт

Добавьте ниже код в свой CSS:

button {
transform: translateY(75%);
}

ответил(а) 2021-01-19T14:05:13+03:00 6 месяцев назад
45

Я бы не стал менять маркер кнопки, так как это повлияет на каждую кнопку.

Как добавить невидимую метку и кнопку взять все пространство столбца? Я думаю, что он выглядит лучше на устройствах.

См. Пример ниже: http://jsfiddle.net/Dhanck/fpurv0L9/7/

<div class="col-sm-3">
<label style="visibility:hidden">das</label>
<button type="button" class="btn btn-primary btn-group-justified">Manage customers...</button>
</div>

ответил(а) 2021-01-19T14:05:13+03:00 6 месяцев назад
45

сделайте это, как сказал @Andrew,

button{
margin-top:25px;
}

ответил(а) 2021-01-19T14:05:13+03:00 6 месяцев назад
46

попробуй это.

добавьте один ярлык над кнопкой с пробелом (без содержимого) внутри кнопки используйте класс-control.

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
body {
padding-top: 50px;
}
<div class="container">
<form id="bookingForm" class="form-horizontal" method="post">
<div class="form-group">
<div class="col-sm-3">
<label class="control-label">Sender</label>
<select class="form-control">
<option>Choose a sender</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label">Receiver</label>
<select class="form-control">
<option>Choose a receiver</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label">Delivery</label>
<select class="form-control">
<option>Choose a delivery address</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label"> </label>
<button type="button" class="btn btn-primary form-control">Manage customers...</button>
</div>
</div>
</form>
</div>

ответил(а) 2021-01-19T14:05:13+03:00 6 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема