title: Bootstrap 3: Horizontal form group inside dropdown
body: <p>The requirement is a horizontal form group inside of a dropdown. When the user clicks the dropdown, they are able to enter text into the appearing text fields.</p>
  
  <p>I am losing control over the width and margin of the form group when inside of the dropdown. For example, the following form group renders fine:</p>
  
  <pre><code>&lt;form class="form-horizontal"&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="strike-from" class="col-sm-2 control-label"&gt;From&lt;/label&gt;
          &lt;div class="col-xs-1"&gt;
              &lt;input type="text" class="form-control" id="strike-from" value=""&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="strike-to" class="col-sm-2 control-label"&gt;To&lt;/label&gt;
          &lt;div class="col-xs-1"&gt;
              &lt;input type="text" class="form-control" id="strike-to" value="""&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="col-sm-offset-2 col-sm-10"&gt;
              &lt;button type="submit" class="btn btn-default"&gt;Apply&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>However when embedding this same HTML inside of a dropdown wrapper, the text fields extend past the container and the margin is compressed.</p>
  
  <p><a href="https://i.stack.imgur.com/zQ6SL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zQ6SL.png" alt="Bad"></a></p>
  
  <pre><code>&lt;div class="form-inline"&gt;
  &lt;div class="form-group"&gt;
      &lt;div class="dropdown"&gt;
          &lt;button class="btn btn-default dropdown-toggle" type="button" id="strikes-range" data-toggle="dropdown" aria-haspopup="true"&gt;
              Strikes
              &lt;span class="caret"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;ul class="dropdown-menu" aria-labelledby="strikes"&gt;
              &lt;li&gt;
                  &lt;form class="form-horizontal"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="strike-from" class="col-sm-2 control-label"&gt;From&lt;/label&gt;
                          &lt;div class="col-xs-1"&gt;
                              &lt;input type="text" class="form-control" id="strike-from" value=""&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="strike-to" class="col-sm-2 control-label"&gt;To&lt;/label&gt;
                          &lt;div class="col-xs-1"&gt;
                              &lt;input type="text" class="form-control" id="strike-to" value=""&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;div class="col-sm-offset-2 col-sm-10"&gt;
                              &lt;button type="submit" class="btn btn-default"&gt;Apply&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there an out of the box implementation of this? Otherwise do I just need to add custom styles for width of text boxes and margin?</p>
  
  <p>Or am I just implementing something incorrectly?</p>