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>

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

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

Answer 1

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

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

1. 将button放入form-group。
＆＃13;
＆＃13;
<div class="form-group">
  <button type="submit" class="btn btn-primary mb-2"><i class="far fa-envelope-open"></i> &nbsp;Subscribe</button>
</div>
＆＃13;
＆＃13;
＆＃13;
1. 保持您的代码不变，但请移除margin-bottom。{/ li>的form-group
   ＆＃13;

   ＆＃13;

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

   ＆＃13;

   ＆＃13;
   ＆＃13;

   我选择最后一种方法。

   ＆＃13;

   ＆＃13;

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

   ＆＃13;

   ＆＃13;
   ＆＃13;

Answer 2

将按钮代码放在与输入字段相同的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>