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

社会主义新天地 提交于 2021-02-07 21:34:33

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!