Twitter bootstrap 引导：带标题的内联表单

我正在尝试生成一个在引导中可编辑的内联表单。在使用流体行时，我似乎无法将控件设置为布局，我需要在顶部设置一些标题，但我不知道如何使其正确对齐

我提出了一个例子来说明这个想法。正如您所看到的，控件重叠，这并不好。最初，在内联表单出现之前，我试图使用一个表，但发现各种输入控件在其中都不满意

<div id="wrapper" class="container-fluid">
<div class="row-fluid">
<form id="frmOptions" method="post" class="well form-inline span12">

     <div class="row-fluid">   
        <div id="formLeft" class="span3">
          <div class="control-group">
            <label for="select1" class="control-label">Option 1:</label>
            <div class="controls">
                <select id="select1">
                    <option>Something</option>
                </select>
                    <select id="select1">
                    <option>Something</option>
                </select>
            </div>      
          </div>
        </div>

        <div id="formCenter" class="span3">
          <div class="control-group">
            <label for="select2" class="control-label">Option 2:</label>
            <div class="controls">
                <select id="select2">
                    <option>Something</option>
                </select>
                 <select id="select2">
                    <option>Something</option>
                </select>
            </div>      
          </div>    
        </div>

        <div id="formRight" class="span3">
          <div class="control-group">
            <label for="select3" class="control-label">Option 3:</label>
            <div class="controls">
                <select id="select3">
                    <option>Something</option>
                </select>
                <select id="select3">
                    <option>Something</option>
                </select>
            </div>      
          </div>    
    </div>   

</form>
</div>
</div>

备选案文1：
某物
某物
备选案文2：
某物
某物
备选案文3：
某物
某物

---

有人对如何解决这个问题有什么建议吗？如果需要，我准备使用引导选择器，但我还没有尝试过它们。

您可以执行以下操作，使选择框按需要排列：

JSFIDLE

顺便说一句，我想你也可以用这种方式创建表单，以后可能会对你有所帮助

---

您可以执行以下操作，使选择框按需要排列：

JSFIDLE

顺便说一句，我想你也可以用这种方式创建表单，以后可能会对你有所帮助

---

将

span12

类添加到

元素中：

---

这修复了重叠。我希望这就是您想要的。

将

span12

类添加到

元素中：

---

这修复了重叠。我希望这就是您想要的。

在

中添加
span12
类。流体行

的宽度为100%。@kzh好吧，我有我的方法。。顺便说一句，我的写作方式是在

中添加
span12
类。流体行

的宽度为100%。@kzh我有自己的方式。。顺便说一句，我使用.span1到.span12调整网格大小的方法来处理与网格列大小相同的输入的问题。你的专栏是关于span3使用span12的，因为这是一种错误的大小调整方法。网格大小对匹配相同网格列大小的输入使用.span1到.span12。你的专栏是关于span3使用span12的，因为这是一种错误的大小调整方法。

 .form-inline select {
 margin-bottom:10px;
 }
 @media (min-width: 768px) and (max-width: 979px) {
#frmOptions select {
     width:100%;
    }
    }
 @media (max-width: 767px) {
#frmOptions select {
     width:100%
    }
   }
 @media (max-width: 480px) {
  #frmOptions select {
     width:100%;
    }
  }