表单内联中的引导按钮对齐

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) 在第二部分中，对齐是正确的，表单控件类未应用于文本框

可能的原因：我发现问题出在表单控件类上，我已将它与字体大小一起应用于文本框。当我删除 .form-control 类的 font-size = 14px 时，按钮的对齐方式似乎正确。

我一直在寻找一种更好的方法来克服这种对齐问题，并将表单控制类应用于文本框，以便维护所有引导样式。

Answer 1

只需在您自己的 CSS 中覆盖或更改按钮样式属性 vertical-align。将它从 vertical-align: middle 更改为 "vertical-align: top" ...应该可以修复它。

.btn { vertical-align: top; }