Bootstrap 3选择下拉不对齐

Question

我试图使用输入文本框以及自定义高度和宽度的选择框,但我无法正确对齐它们:

<form class="form-inline" role="form">
<div class="form-group">
    <input class="form-control" style="width: 600px; height: 30px" />
    <select class="form-control">
        //options here
    </select>
    <button type="submit" class="btn btn-default" id="<portlet:namespace/>productSearchBtn">Search</button>
</div>
</form>

输出看起来像这样

然后我为选择按钮[宽度:300px]设置自定义宽度,

看起来像输入文本框,选择下拉和提交按钮是不对齐的.

请...我怎样才能修复它们以便两者正确对齐？

Answer 1

你应该看看Bootstrap 3.0网格列结构.

这就是你要找的东西

标记:

    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
    <div class="col-xs-4 col-md-3">
        <input class="form-control" />
    </div>
    <div class="col-xs-4 col-md-3">
        <select class="form-control">//options here</select>
    </div>
    <div class="col-xs-2 col-md-1">
        <button type="submit" class="btn btn-default" id="<portlet:namespace/>productSearchBtn">Search</button></div>
</div>