Bootstrap 3：输入组重叠中的多重选择

Question

我在将多个select代码加入.input-group时遇到问题。

这是我的代码：

<form class="form-horizontal" role="form">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                      <label class="control-label col-md-6" >Label 1</label>
                      <div class="col-md-6">
                        <select class="form-control">
                        </select>  
                      </div>
                    </div>
                </div>              
                <div class="col-md-6">  
                    <div class="form-group">
                      <label class="control-label col-md-6" >Label 2</label>
                      <div class="col-md-6">
                        <select class="form-control" >
                        </select>  
                      </div>
                    </div>                  
                </div>              
            </div>
        <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                      <label class="control-label col-md-6">Label 3</label>
                      <div class="input-group col-md-6">
                        <span class="input-group-btn">
                                <select class="form-control">
                            </select>
                            </span>
                            <span class="input-group-btn">
                                <select class="form-control">
                            </select>
                            </span>
                            <span class="input-group-btn">
                                <select class="form-control">
                            </select>
                            </span>              
                      </div>
                    </div>
                </div>                          
            </div>
        </form>

问题如下：

在上一个form-group中，在标签3之后，其中三个span的{​​{1}}内部有select，它们应该具有更高的宽度，并且它们在它们的右侧和左侧重叠input-group容器（约15 px）。

这是jsfiddle演示问题（只需点击最后一行中的第一个或第三个选择）

Answer 1

使用class="form-group"制作了另一个div，请参阅代码段中的完整页面模式下的DEMO

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<form class="form-horizontal" role="form">
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label class="control-label col-md-6">Label 1</label>
        <div class="col-md-6">
          <select class="form-control">
          </select>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label class="control-label col-md-6">Label 2</label>
        <div class="col-md-6">
          <select class="form-control">
          </select>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label class="control-label col-md-6">Label 3</label>
        <div class="col-md-6">
          <div class="input-group ">


            <span class="input-group-btn">
    					    		<select class="form-control">
    			        		</select>
    				    		</span>
            <span class="input-group-btn">
    					    		<select class="form-control">
    			        		</select>
    				    		</span>
            <span class="input-group-btn">
    					    		<select class="form-control">
    			        		</select>
    				    		</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

Answer 2

更改HTML

<form class="form-horizontal container-fluid" role="form">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                  <label class="control-label col-md-6" >Label 1</label>
                  <div class="col-md-6">
                    <select class="form-control">
                    </select>  
                  </div>
                </div>
            </div>              
            <div class="col-md-6">  
                <div class="form-group">
                  <label class="control-label col-md-6" >Label 2</label>
                  <div class="col-md-6">
                    <select class="form-control" >
                    </select>  
                  </div>
                </div>                  
            </div>              
        </div>
    <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                  <label class="control-label col-md-6">Label 3</label>
                 <div class="input-group">
  <span class="input-group-addon">
    <input type="checkbox" aria-label="Checkbox for following text input">
  </span>
  <select class="form-control">
                        </select>
</div>
          <div class="input-group">
  <span class="input-group-addon">
    <input type="checkbox" aria-label="Checkbox for following text input">
  </span>
  <select class="form-control">
                        </select>
</div>
             <div class="input-group">
  <span class="input-group-addon">
    <input type="checkbox" aria-label="Checkbox for following text input">
  </span>
  <select class="form-control">
                        </select>
</div>
                </div>
            </div>                          
        </div>
    </form>

https://jsfiddle.net/qrtcq8bs/4/

Answer 3

只需添加

margin-left:0;＆amp; margin-right:0;

表单组中的

因为默认为负

<div class="form-group" style="margin-left:0 !important;  margin-right:0 !important;">
  <label class="control-label col-md-6">Label 3</label>
  <div class="input-group col-md-6">
    <span class="input-group-btn">
                                <select class="form-control">
                            </select>
                            </span>
    <span class="input-group-btn">
                                <select class="form-control">
                            </select>
                            </span>
    <span class="input-group-btn">
                                <select class="form-control">
                            </select>
                            </span>
  </div>
</div>