Вертикальное выравнивание кнопки

Я хочу разместить текстовые поля с кнопкой в системе сетки по горизонтали, но кнопка не хочет выравниваться по вертикали (она должна быть в системе сетки, потому что я хочу складывать эту группу элементов в случае мобильных устройств):

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class = "form-row">

    <div class = "col"></div>

    <div class = "col-sm-2">
        <label for = "inputEmail4">Email</label>
        <input type = "text" class = "form-control" placeholder = "First name">
    </div>

    <div class = "col-sm-2">
        <label for = "inputEmail4">Email</label>
        <input type = "text" class = "form-control" placeholder = "Last name">
    </div>

    <div class = "col-sm-2">
        <label for = "inputEmail4">Email</label>
        <input type = "text" class = "form-control" placeholder = "Last name">
    </div>

    <div class = "col-sm-2">
        <button type = "submit" class = "btn btn-primary">Sign in</button>  
    </div>

    <div class = "col"></div>

</div>

Обновлено: Я решил эту проблему так:

<div class = "row">
    <div class = "col"></div>
    <div class = "col-sm-2 py-0 px-1">
        Last name:
        <input type = "text" class = "form-control form-control-sm mb-2" 
        placeholder = "Last name">
    </div>
    <div class = "col-sm-2 py-0 px-1">
        First name:
        <input type = "text" class = "form-control form-control-sm mb-2" 
        placeholder = "First name">
    </div>
    <div class = "col-sm-2 py-0 px-1">
        Card ID:
        <input type = "text" class = "form-control form-control-sm mb-2" 
        placeholder = "Card ID">
    </div>
    <div class = "col-sm-2 py-0 px-1">
        <button type = "button" class = "btn btn-sm btn-success btn-block mt-4 
        mb-2">Add</button>
    </div>
    <div class = "col"></div>
</div>

html bootstrap-4

09.08.2018 21:06

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 2

Используйте приведенный ниже класс css vcenter, он будет выравнивать как по вертикали, так и по горизонтали все дочерние элементы элемента с этим классом.

.vcenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class = "form-row">

  <div class = "col"></div>

  <div class = "col-sm-2">
    <label for = "inputEmail4">Email</label>
    <input type = "text" class = "form-control" placeholder = "First name">
  </div>

  <div class = "col-sm-2">
    <label for = "inputEmail4">Email</label>
    <input type = "text" class = "form-control" placeholder = "Last name">
  </div>

  <div class = "col-sm-2">
    <label for = "inputEmail4">Email</label>
    <input type = "text" class = "form-control" placeholder = "Last name">
  </div>

  <div class = "col-sm-2 vcenter">
    <button type = "submit" class = "btn btn-primary">Sign in</button>
  </div>

  <div class = "col"></div>

</div>

Извините, но это работает некорректно. Кнопка должна быть размещена на одном уровне с текстовыми полями.

— 09.08.2018 21:26

@Prime_Bull Спасибо за уделенное время!

— 09.08.2018 21:27

09.08.2018 21:21

Создайте новый класс «abc» и добавьте его в div, содержащий кнопку:

.abc{
  position:absolute;
  bottom:0;
}

Надеюсь, это то, что вам нужно:

.abc{
position:absolute;
bottom:0;
}

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class = "form-row">

    <div class = "col"></div>

    <div class = "col-sm-2">
        <label for = "inputEmail4">Email</label>
        <input type = "text" class = "form-control" placeholder = "First name">
    </div>

    <div class = "col-sm-2">
        <label for = "inputEmail4">Email</label>
        <input type = "text" class = "form-control" placeholder = "Last name">
    </div>

    <div class = "col-sm-2">
        <label for = "inputEmail4">Email</label>
        <input type = "text" class = "form-control" placeholder = "Last name">
    </div>

    <div class = "col-sm-2">

        <button type = "submit" class = "btn btn-primary abc">Sign in</button>  
    </div>

    <div class = "col"></div>

</div>

Он работает частично, потому что при открытии на мобильном устройстве эта кнопка перекрывает текстовое поле рядом с ним, но спасибо!

— 10.08.2018 13:06

10.08.2018 08:03