title: Toggle button and search bar occasionally show misaligned
body: <p>When I refresh the page sometimes, the toggle button and search bar will be misaligned but then another refresh will fix it, not sure what causes this behavior.</p>
  
  <p><a href="https://imgur.com/rP4WZ18" rel="nofollow">https://imgur.com/rP4WZ18</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #2A333E;
    background-image: linear-gradient(to bottom, #2A333E, #918e82 100%);
    background-attachment: fixed;
  }
  
  div {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
  
  &lt;!-- Additional styles for extra features --&gt;
  &lt;link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"&gt;
  
  &lt;body&gt;
    &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&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="#"&gt;TEST&lt;/a&gt;
        &lt;/div&gt;
        &lt;div id="navbar" class="collapse navbar-collapse"&gt;
          &lt;form class="navbar-form navbar-right" role="form" action="test.php" method="post"&gt;
            &lt;div class="input-group"style="float:left;display:inline;"&gt;
              &lt;input type="hidden" name="platform" value="2"&gt;
              &lt;input type="checkbox" name="platform" value="1" checked data-size="normal" data-toggle="toggle" data-on="TEST1" data-off="TEST2" data-onstyle="success" data-offstyle="primary"&gt;
            &lt;/div&gt;
            &lt;div class="input-group"&gt;
              &lt;input type="text" class="form-control" name="username" placeholder=" Name" maxlength="16" pattern="[A-Za-z][A-Za-z0-9_- ]{0,15}"&gt;
              &lt;div class="input-group-btn"&gt;
                &lt;button class="btn btn-default" type="submit" name="submit"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;&amp;nbsp;&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;!--/.nav-collapse --&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  
    &lt;!-- Bootstrap core JavaScript
      ================================================== --&gt;
    &lt;!-- Placed at the end of the document so the pages load faster --&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      window.jQuery || document.write('&lt;script src="bootstrap-3.3.6/docs/assets/js/vendor/jquery.min.js"&gt;&lt;\/script&gt;')
  
    &lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384
      -0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Last question, would it be possible to make the toggle and search bar merged into one seamless element? Any other code suggestions, I'm all ears. This is just a project I'm doing to try and get better.</p>