title: Adding form to navbar modal screws up spacing (Bootstrap)
body: <p>I have a navbar with a modal inside of it. That's done. However, I want this modal to be a form. When I add the <code>&lt;form&gt;</code> tags, however, it screws up the spacing of the navbar.</p>
  
  <p>Here's the original navbar code:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default" role="navigation"&gt;
  &lt;div class="navbar-header"&gt;
    &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;a class="navbar-brand" href="/index"&gt;Foo&lt;/a&gt;
  &lt;/div&gt;
  &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
  &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
    &lt;form class="navbar-form navbar-right" role="search"&gt;
      &lt;button class="btn btn-success" data-toggle="modal" data-target="#filterModal"&gt;&lt;i class="icon-white icon-th"&gt;&lt;/i&gt;Filtered Search&lt;/button&gt;
      &lt;!--Filter Modal --&gt;
      &lt;div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
        &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              &lt;h4 class="modal-title" id="myModalLabel"&gt;Select Entities to Search For&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
  
              &lt;div id ="radios1" class="form-group" data-toggle="buttons"&gt;
                &lt;button id="farms_radio" type="button" name="option" value="first" class="btn btn-success"&gt;First&lt;/button&gt;
                &lt;button id="fields_radio" type="button" name="option" value="second" class="btn btn-success"&gt;Second&lt;/button&gt;
                &lt;button id="cropzones_radio" type="button" name="option" value="third" class="btn btn-success"&gt;Third&lt;/button&gt;
                &lt;input type='hidden' name="choices" value={{request.form['choices']}} /&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;button id="filter_search" type="button" class="btn btn-success"&gt;Search&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;&lt;!-- /.modal-content --&gt;
        &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
      &lt;/div&gt;&lt;!-- /.modal --&gt;
      &lt;div class="form-group"&gt;
        &lt;input type="text" class="form-control" placeholder="Search"&gt;
      &lt;/div&gt;
      &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
  </code></pre>
  
  <p></p>
  
  <p>Now, when I add the <code>&lt;form&gt;</code> tags around the <code>div id="radios1"</code>, it messes up the navbar itself. Anyone know why?</p>