Используя столбцы bootstrap, но показывая один компонент ниже другого

Question

Это мой html код:

<label>Search:</label>
<input type="text" id="list_search" class="form-control col-8">
<button class="btn btn-info col-2">Search</button>

Вы видите, что мой входной тег имеет 8 столбцов, а моя кнопка имеет 2. Тогда я не получаю почему Я получить это:

Разве не предполагается, что они должны быть выровнены по X? Я ожидаю:

Но мне пришлось использовать там <div class="row">, который изменяет поля (посмотрите на этикетку).

Answer 1

Вам нужно встроенную форму

и не забудьте установить for внутри label

<form class="form-inline">
    <label for="list_search">Search:</label>
    <input type="text" id="list_search" class="form-control">
    <button class="btn btn-info">Search</button>
</form>

GL