在 Bootstrap 3 中对齐输入并选择彼此相邻答案

【问题标题】：Aligning input and select next to each other in Bootstrap 3在 Bootstrap 3 中对齐输入并选择彼此相邻
【发布时间】：2014-03-24 04:29:48
【问题描述】：

我有这段代码 sn-p，但这会在换行后呈现下拉菜单，最好的引导 3 col 类是什么？（选择输入中内嵌旁边的下拉菜单）

<form class="form-horizontal well" >
   <div class="form-group">
      <label class="col-lg-2 control-label">Memory</label>
      <div class="col-lg-4">
         <div>
            <input id="memory" type="text" class="form-control">
         </div>
         <div class="col-lg-4">
            <select id="memoryType"  class="form-control">
               <option value="GB" selected="selected">GB</option>
               <option value="MB">MB</option>
            </select>
         </div>
      </div>
   </div>
</form>

【问题讨论】：

你看过关于“内联表单”的文档吗？ getbootstrap.com/css/#forms

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

【解决方案1】：

好的，我就是这样做的。

首先将form-inline 类添加到您的表单中。

然后从标签和输入中删除 col-lg 类。

同时删除所有不需要的 div，这会产生以下 html：

标记

<form class="form-inline well" >
    <div class="form-group">
        <label class="control-label">Memory</label>
        <input id="memory" type="text" class="form-control">
    </div>
    <div class="form-group">
        <select id="memoryType"  class="form-control">
            <option value="GB" selected="selected">GB</option>
            <option value="MB">MB</option>
        </select>
    </div>
</form>

屏幕抓取

【讨论】：

【解决方案2】：

如果您希望表单域水平对齐 - 您实际上可以使用内联表单。例如：

<form class="form-inline" role="form">
    <div class="form-group">
        <label class="sr-only" for="memory">Memory</label>
        <input id="memory" type="text" class="form-control">
    </div>
    <div class="form-group">
        <select id="memoryType" class="form-control">
            <option value="GB" selected="selected">GB</option>
            <option value="MB">MB</option>
        </select>
    </div>
</form>

注意：未在实际浏览器中测试...

【讨论】：