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

【问题标题】：Bootstrap 3.3.7 - form-inline - input and button same lineBootstrap 3.3.7 - form-inline - 输入和按钮同一行
【发布时间】：2018-09-23 09:20:10
【问题描述】：

输入和按钮在同一行上可以正常工作，但是输入尺寸很小并且有更大的空间。

我希望它是 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>

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案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>

【讨论】：

@AugustoDomingos 如果此答案对您有用，请务必接受它作为最佳答案。