Question

我正在尝试生成一个可在Bootstrap中编辑的内联表单。在使用流体行时我似乎无法获得布局控件，我需要在顶部添加一些标题，并且无法弄清楚如何使其正确排列。

我已经分了一个jsfiddle来说明这个想法。正如您所看到的那样，控件重叠并不是很好。最初在内联形式之前，我试图使用表，但发现各种输入控件确实不满意。

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

有没有人有任何建议如何解决这个问题？如果需要，我可以使用bootstrap选择器http://silviomoreto.github.com/bootstrap-select/，但我还没有尝试过。

Answer 1

将span12课程添加到<select>元素：http://jsfiddle.net/kaleb/CdNef/244/

这解决了重叠问题。我希望这就是你要找的东西。

Answer 2

您可以执行以下操作以根据需要排列选择框：

JSfiddle Demo

 .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%;
    }
  }

BTW我认为你也可以用这种方式创建表单，可能会帮助你以后

form jsfiddle

Bootstrap：带标题的内联表单

2 个答案: