bootstrap按表格内联的按钮对齐方式

Question

当屏幕缩小到小尺寸时，form-inline div内的按钮对齐关闭。我创造了以下小提琴

小提琴 - https://jsfiddle.net/koolhuman/a4zdoodu/2/

//section 1
<div class="form-inline">
                    <label>Enter Zip/Postal Code:</label>
                    <input type="text" class="form-control" value="" id="localMarketPostalCode" name="localMarketPostalCode" size="5">
                    <input type="button" id="searchButton" value="Search" class="btn btn-success">
</div>

<br/>

//section2      
<div class="form-inline">
               <label>Search</label>
               <input type="text" id="search" name="search" placeholder="Search...">
                <select id="searchon" name="searchon"> 
                    <option value="0">First Name</option>
                    <option value="1">Last Name</option>
                </select>
                <button type="submit" class="btn btn-success">Search</button>
</div> 

1）第一部分是问题所在，并且将表单控件类应用于文本框

2）在第二部分中，对齐是正确的，并且表单控件类不应用于文本框

可能的原因：我发现问题在于表单控件类，我已经将其应用于文本框并结合了font-size。当我删除.form-control类的font-size = 14px时，按钮的对齐似乎是正确的。

我一直在寻找一种更好的方法来解决这种对齐问题，并且可以将表单控件类应用到文本框中，以便维护所有引导样式。

Answer 1

在您自己的CSS中覆盖或更改按钮样式属性vertical-align。将它从vertical-align：middle更改为＆＃34; vertical-align：top＆＃34; ......应该解决它。

.btn { vertical-align: top; }