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>

，输出看起来像这样

然后我为Select按钮设置自定义宽度[width：300px]，

似乎输入文本框，选择下拉列表和提交按钮未对齐。

请...我如何修复它们以便两者正确对齐？

Answer 1

你应该看Bootstrap 3.0 grid-column structure.

Here's what you are looking for

<强>标记：

    <!-- 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>

Answer 2

使用引导网格系统而不是固定宽度http://getbootstrap.com/css/#grid

Answer 3

尝试使用form-inline和form-group

<form class="form-inline">

    <div class="form-group">
        <input class="form-control" />
    </div>

    <div class="form-group">
        <select class="form-control">
            <option>Categories</option>
        </select>
    </div>

    <button type="submit" class="btn btn-default" id="<portlet:namespace/>productSearchBtn">Search</button>
</form>

Answer 4

你应该做的所有事情就是将整个事情包裹在form-inline班级和form-group

中

<强>代码

<form class="form-inline" role="form">
<div class="form-group">
    <input class="form-control" />
  </div>

  <div class="form-group">
    <select class="form-control">
      <option>All Categories</option>
    </select>

    <button type="submit" class="btn btn-default" id="<portlet:namespace/>productSearchBtn">Search</button>
</div>
</form>