内联形式垂直间距问题

Question

我正在尝试创建一个简单的内联表单，只有一个文本框和旁边的按钮。它在PC中看起来不错，但是当我在移动设备中打开它时，表单会换行并且按钮显示在文本框的正下方，它们之间没有任何空格。是否可以将按钮向下撞击一下，使其不会碰到上面的文本框？

这就是我实施它的方式。

<form class="form-inline" role="form" action="search.asp" method="post">
    <input type="text" class="form-control" id="searcharea" name="searcharea" placeholder="Enter city or state or postal code" size="30">
    <input type="submit" class="btn greenbtn" value="Search Now">
</form> 

Answer 1

<form class="form-inline" role="form" action="search.asp" method="post">    
<div class="input-group">    
  <input type="text" class="form-control" placeholder="Enter city or state or postal code" aria-describedby="basic-addon2">    
  <span class="input-group-addon" id="basic-addon2">Search Now</span>    
</div>    
</form>

并在＃basic-addon2 span中添加一些javascript / jquery提交函数，以便它可用于提交表单