代码之家 › 专栏 › 技术社区 › John

引导程序4,表单内联未在XS视图上对齐

bootstrap-4 css

John · 技术社区 · 7 年前

使用Boostrap 4,我有一个。我的页面页脚处的表单内联。当视口大于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>

。。。但从我对引导格式的理解来看,按钮通常应该位于该表单组之外。

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

2 回复 | 直到 7 年前

mahan 7 年前

你不应该把 buttons 在相同的 form-group 作为 input 因为 “窗体”组 ,默认情况下,只有 margin-bottom 。

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

将 button 在a中 “窗体”组 。

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

保持代码不变,但删除 边距底部 的 “窗体”组 。

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

John 7 年前

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