Как выровнять текстовое поле и кнопку по горизонтали, используя bootstrap -3 - PullRequest
Новая
       8

Как выровнять текстовое поле и кнопку по горизонтали, используя bootstrap -3

0 голосов
/ 09 апреля 2020

У меня проблема с выравниванием текстового поля и кнопки отправки по горизонтали, используя bootstrap 4, я пробовал какое-то решение, такое как d-flex, d-inline-flex и не работает.

Ниже приведены ожидаемые результаты и фактическое положение текстового поля и кнопки отправки.

Ожидаемый результат: 

<textbox><submit button>

Фактические значения: 

<textbox>
<submit button>

Вот мой код: 

<div class="container-fluid d-inline-flex padding col-md-6">
    <form>
        <input class="form-control form-control-md ml-3 active-blue" type="text" placeholder="Search" aria-label="Search">
        <input class="btn btn-secondary form-control-md" type="submit" value="Search" />
    </form>
</div>

Заранее спасибо! : D

1 Ответ

0 голосов
/ 10 апреля 2020

Я нашел ответ на stackoverflow и он говорит, что решение

Пожалуйста, посмотрите код html ниже, 

<div class="container groug-from col-md-7">
    <form>
        <div class="form-group row">
            <input class="form-control col-md-10 text-size-7" type="text" placeholder="Find something here">
            <div class="col-md-2">
                <input class="btn btn-secondary" type="submit" value="Search" />
            </div>
        </div>
    </form>
</div>

Чтобы сделать его горизонтальным, я должен добавить этот селектор класса в bootstrap называется: form-group .

Он содержится внутри тега с селектором класса в bootstrap и называется: form-inline

...