0

我正在尝试生成可在 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>

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

4

2 回答 2

3

将span12类添加到您的<select>元素中：http: //jsfiddle.net/kaleb/CdNef/244/

这修复了重叠。我希望这就是你要找的。

于 2013-03-01T18:16:02.913 回答
0

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

JSfiddle演示

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

顺便说一句，我认为您也可以通过这种方式创建表单，以后可能会对您有所帮助

表单jsfiddle

于 2013-03-01T18:05:07.907 回答