title: Bootstrap 3: multiple select in input-group overlap
body: <p>I have a problem joining multiple <code>select</code> tags into <code>.input-group</code>.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;form class="form-horizontal" role="form"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;div class="form-group"&gt;
                        &lt;label class="control-label col-md-6" &gt;Label 1&lt;/label&gt;
                        &lt;div class="col-md-6"&gt;
                          &lt;select class="form-control"&gt;
                          &lt;/select&gt;  
                        &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;              
                  &lt;div class="col-md-6"&gt;  
                      &lt;div class="form-group"&gt;
                        &lt;label class="control-label col-md-6" &gt;Label 2&lt;/label&gt;
                        &lt;div class="col-md-6"&gt;
                          &lt;select class="form-control" &gt;
                          &lt;/select&gt;  
                        &lt;/div&gt;
                      &lt;/div&gt;                  
                  &lt;/div&gt;              
              &lt;/div&gt;
          &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;div class="form-group"&gt;
                        &lt;label class="control-label col-md-6"&gt;Label 3&lt;/label&gt;
                        &lt;div class="input-group col-md-6"&gt;
                          &lt;span class="input-group-btn"&gt;
                                  &lt;select class="form-control"&gt;
                              &lt;/select&gt;
                              &lt;/span&gt;
                              &lt;span class="input-group-btn"&gt;
                                  &lt;select class="form-control"&gt;
                              &lt;/select&gt;
                              &lt;/span&gt;
                              &lt;span class="input-group-btn"&gt;
                                  &lt;select class="form-control"&gt;
                              &lt;/select&gt;
                              &lt;/span&gt;              
                        &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;                          
              &lt;/div&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>The problem is as follows:</p>
  
  <p>In the last <code>form-group</code>, after the Label 3, three <code>span</code>'s with <code>select</code> inside them have higher width then they should have and they overlap to the right and left of their <code>input-group</code> container (about 15 px).</p>
  
  <p>Here is <a href="https://jsfiddle.net/qrtcq8bs/" rel="nofollow">jsfiddle</a> demostrating the problem (just click on first or third select in the last row)</p>