css - Bootstrap 4，Form-Inline在XS View 上未对齐

使用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>

...我通过将按钮放在与输入相同的form-group 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格式的了解，按钮通常应位于该表单组之外。

无论如何，这似乎已经解决了问题。

最佳答案

您不应将buttons与form-group放在同一input中，因为默认情况下form-group仅具有margin-bottom。

有几种方法可以解决此问题。


将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>

保持您的代码不变，但删除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>