Bootstrap 3.3.7-表单内联-输入和按钮在同一行 [英] 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.

我希望它是100％完整尺寸，在输入和按钮下面的行后面，您看到了吗?我的HTML是:

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>

推荐答案

将 .signup-form 设置为 display:flex; 和 flex:1 0自动; 将按钮放在输入字段旁边，并使其占据整个宽度.唯一需要做的就是将输入字段的宽度设置为100％.

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>

这篇关于Bootstrap 3.3.7-表单内联-输入和按钮在同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！