Bootstrap 3.3.7-表单内联-输入和按钮在同一行

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>