Bootstrap 4, Form-Inline не выравнивается в представлении XS

Question

Используя Boostrap 4, у меня есть .form-inline в нижней части моей страницы. Это выглядит хорошо, когда область просмотра больше, чем точка останова XS ...

... но затем прерывается при входе в представление XS ...

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

Вот код, который я использовал ...

<div class="col-md-6 col-lg-4 order-first order-md-6 align-self-center">

    <form class="form-inline justify-content-center">

        <div class="form-group">

            <input type="email" class="form-control mr-2 mb-2" id="EmailInpue" placeholder="Join our Mailing List" />

        </div>

        <button type="submit" class="btn btn-primary mb-2"><i class="far fa-envelope-open"></i> &nbsp;Subscribe</button>

    </form>

</div>

... Мне удалось получить то, что я хотел, поместив кнопку в тот же div группы форм, что и вход ...

<div class="col-md-6 col-lg-4 order-first order-md-6 align-self-center">

    <form class="form-inline justify-content-center">

        <div class="form-group">

            <input type="email" class="form-control mr-2 mb-2" id="EmailInpue" placeholder="Join our Mailing List" />

            <button type="submit" class="btn btn-primary mb-2"><i class="far fa-envelope-open"></i> &nbsp;Subscribe</button>

        </div>

    </form>

</div>

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

В любом случае, похоже, это решило проблему.

Answer 1

Вы не должны помещать buttons в те же form-group, что и input, поскольку form-group по умолчанию имеет только margin-bottom.

Есть несколько способов решить эту проблему.

1. Поместите button в form-group.

<div class="form-group">
  <button type="submit" class="btn btn-primary mb-2"><i class="far fa-envelope-open"></i> &nbsp;Subscribe</button>
</div>

2. Сохраните ваш код как есть, но удалите margin-bottom из form-group.

<div class="form-group mb-0">

Я бы пошел на последний подход.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="col-md-6 col-lg-4 order-first order-md-6 align-self-center">

  <form class="form-inline justify-content-center">

    <div class="form-group mb-0">

      <input type="email" class="form-control mr-2 mb-2" id="EmailInpue" placeholder="Join our Mailing List" />

    </div>

    <button type="submit" class="btn btn-primary mb-2"><i class="far fa-envelope-open"></i> &nbsp;Subscribe</button>

  </form>

Answer 2

Помещение кода кнопки в тот же div группы форм, что и в поле ввода, похоже, сработало ...

<div class="col-md-6 col-lg-4 order-first order-md-6 align-self-center">

    <form class="form-inline justify-content-center">

        <div class="form-group">

            <input type="email" class="form-control mr-2 mb-2" id="EmailInpue" placeholder="Join our Mailing List" />

            <button type="submit" class="btn btn-primary mb-2"><i class="far fa-envelope-open"></i> &nbsp;Subscribe</button>

        </div>

    </form>

</div>