Bootstrap 3 选择下拉菜单错位答案

【问题标题】：Bootstrap 3 Select drop down mis-alignmentBootstrap 3 选择下拉菜单错位
【发布时间】：2014-01-03 09:03:10
【问题描述】：

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

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

输出看起来像这样

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

好像输入文本框，选择下拉和提交按钮错位了。

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

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

抱歉没有帮助。结果与第一张图像最相似，但略有不同。
仅供参考，我只是用 div 类型 col-md-* 包装了每个元素
是的，将每个元素包装在 col-md-* div 中：第一个示例 col-md-4 第二个 col-md-4 和第三个 col-md-2 => 总和为 12 列

【解决方案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>

【讨论】：

我忘了在我的 OP 中提及，我使用了带有 'form-inline' 和 role='form' 的表单

【解决方案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>

【讨论】：

我忘了在我的 OP 中提到，我使用了带有 'form-inline' 和 role='form' 的表单
@Reddy 你能检查一下这个fiddle 如果这不是你要找的，请将你的代码放在另一个小提琴中。