html - Bootstrap 3.3.7 - form-inline - 输入和按钮在同一行

Question

输入和按钮在同一行上正常工作，但输入尺寸较小，有足够的空间让它变大。

我希望它是 100% 全尺寸，沿着输入和按钮下面的线，你看到了吗？我的 HTML 是:

<form class="form-inline"> 
    <div class="form-group"> 
        <input type="email" class="form-control emailNewsletter" placeholder="Your Email goes here">
    </div> 
    <div class="form-group"> 
        <button type="submit" class="btn btn-default">Sign Up!</button> 
    </div> 
</form>

Answer 1

将 .signup-form 设置为 display: flex; 和 flex: 1 0 auto; 将按钮放在输入字段旁边，让它占据整个宽度。您唯一需要做的就是将输入字段设置为 100% 宽度。

.form-inline {
  display: flex;
}

.signup-form {
  display: flex;
  flex: 1 0 auto;
}

.emailNewsletter {
  width: 100%;
}

<form class="form-inline">
  <div class="form-group signup-form"> <input type="email" class="form-control emailNewsletter" placeholder="Your Email goes here"> </div>
  <div class="form-group"> <button type="submit" class="btn btn-default">Sign Up!</button> </div>
</form>