title: form-inline causing overlap of individual form-group components
body: <p>as I learn more about bootstrap, I am making good progress but I am once again faced with a basic challenge. This is about inline-forms.</p>
  
  <p><img src="https://i.stack.imgur.com/Kqtoz.png" alt="Screenshot of problem with inline-form"></p>
  
  <p>Please see attached screenshot. As you can see, I have two problems. The first and easily identifiable is that in the 'experience' section - this is an inline form nested within a form-group and the problem is overlapping fields. Ideally they should all be next to each other with a 10px buffer between them. The code for this section is below</p>
  
  <pre><code> &lt;div class="form-group row-top-buffer"&gt;
      &lt;label for="experience" class="col-md-3 control-label"&gt;Experience&lt;/label&gt;
      &lt;div class="col-md-9 form-inline" role="form"&gt;
          &lt;div class="form-group col-md-3"&gt;
              &lt;label class="sr-only" for="jobMinExperience"&gt;Min Experience&lt;/label&gt;
              &lt;input type="text" class="form-control" id="jobMinExperience" placeholder="0" /&gt;
          &lt;/div&gt;
          &lt;div class="form-group col-md-3"&gt;
              &lt;label class="sr-only" for="jobMaxExperience"&gt;Max Experience&lt;/label&gt;
              &lt;input type="text" class="form-control" id="jobMaxExperience" placeholder="0" /&gt;
          &lt;/div&gt;
          &lt;div class="form-group col-md-3"&gt;
              &lt;label class="sr-only" for="jobExperienceDropDown"&gt;Experience&lt;/label&gt;
              &lt;div class="dropdown"&gt;
                  &lt;button class="btn btn-default dropdown-toggle" type="button" id="jobExperienceDropDown" data-toggle="dropdown"&gt;
                      Dropdown
                      &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;ul class="dropdown-menu" role="menu" aria-labelledby="jobExperienceDropDown"&gt;
                      &lt;li role="presentation"&gt;
                          &lt;a role="menuitem" tabindex="-1" href="#"&gt;years&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li role="presentation"&gt;
                          &lt;a role="menuitem" tabindex="-1" href="#"&gt;months&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The second problem which is not so apparent, is the one in the 'Location' row. I have two rows of components. the first is a simple full-width text input. The second row however is an inline form comprising of multiple components. Here I would like the final text box, for zip code, to stretch until the end of the 1st row - but it abruptly stops short. Code for this secion is provided below</p>
  
  <pre><code>    &lt;div class="form-group row-top-buffer"&gt;
      &lt;label for="jobLocation" class="col-md-3 control-label"&gt;Location&lt;/label&gt;
      &lt;div class="col-md-9"&gt;
          &lt;input type="text" class="form-control" id="jobStreet" name="jobStreet" placeholder="Street" /&gt;
          &lt;div class="form-inline" role="form" style="padding-top: 9px;"&gt;
              &lt;div class="form-group col-md-5"&gt;
                  &lt;label class="sr-only" for="jobCity"&gt;City&lt;/label&gt;
                  &lt;input type="text" class="form-control" id="jobCity" name="jobCity" placeholder="City" /&gt;
              &lt;/div&gt;
              &lt;div class="form-group col-md-2 margin-0"&gt;
                  &lt;label class="sr-only" for="jobState"&gt;State&lt;/label&gt;
                  &lt;?
                      include_once 'stateDropDown.php';
                  ?&gt;
              &lt;/div&gt;
              &lt;div class="form-group col-md-3 margin-0"&gt;
                  &lt;label class="sr-only" for="jobZip"&gt;City&lt;/label&gt;
                  &lt;input type="text" class="form-control" id="jobZip" name="jobZip" placeholder="00000" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>