Bootstrap 3.3.7 - form-inline - input and button same line

问题

The input and the button works correctly on the same line, but the input size is small and has room for it to be larger.

I would like it to be 100% full size, following the line below the input and button, you see? My HTML is:

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

回答1:

Setting .signup-form to display: flex; and flex: 1 0 auto; puts the button next to the input field and let it take the full width. Only thing you need to do is setting the input field to 100% width.

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

来源：https://stackoverflow.com/questions/52459563/bootstrap-3-3-7-form-inline-input-and-button-same-line