Как поставить кнопку рядом с входом Twitter Bootstrap 4?

Как разместить кнопку рядом с входом в Bootstrap. Если я ставлю css или играю с классами bootstrap случайным образом, я знаю, что это работает, но я хочу знать хороший способ сделать это. Я не хочу объединять кнопку с текстовым полем, как это делают input-group-btn. Мне нужен нормальный стиль бутстрэпа для кнопок.

<div>
    <input class="form-control" /> <button class="btn btn-primary">enter</button>
</div>

Я получаю это: 

|input                    | //occupies the full width
(button) //button comes to bottom

Чего я хочу: 

|input                   | (button) //same "line".
2 3
css3 twitter-bootstrap bootstrap-4

2 ответа:

Вариант 1 - form-inline класс...

<div class="form-inline">
    <input class="form-control">
    <button class="btn btn-primary">enter</button>
</div>

Кроме того, вы можете использовать mr-1 (margin-right), чтобы добавить небольшое поле между входом и кнопкой: https://www.codeply.com/go/5XCUJIEvua

Вариант 2 - table-cell класс...

Другой вариант (если вы хотите, чтобы вход и кнопка были полной ширины) - использовать класс d-table-cell..

<div class="d-table-cell w-100">
    <input class="form-control">
</div>
 <div class="d-table-cell align-middle">
    <button class="btn btn-primary">enter</button>
</div>

Вариант 3 - d-flex класс...

Наконец, самый простой способ может быть просто использовать d-flex, который устанавливает display:flex 

<div class="d-flex">
        <input class="form-control mr-1">
        <button class="btn btn-primary">enter</button>
</div>

Демо всех 3-х вариантов:
https://www.codeply.com/go/5XCUJIEvua

4

Использовать входные группы : 

body {
  padding: 1rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-success" type="button">Go!</button>
  </span>
</div>
3