title: Twitter Bootstrap 3.0 - centered search box
body: <p>I'm working in Bootstrap 3.0 trying to make a Google-style search box that has a "Search Help" link after the Submit button. </p>
  
  <p>My problem: when I go responsive I lose my offset margins and the button wraps to the next line.</p>
  
  <pre><code>&lt;div class="row search"&gt;
    &lt;div class="col-md-8 col-md-offset-2"&gt;
      &lt;form class="form-inline" role="form"&gt;
        &lt;div class="form-group"&gt;
          &lt;label class="sr-only" for=""&gt;Enter search terms&lt;/label&gt;
          &lt;input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms"&gt;
          &lt;input id="cn" name="cn" type="hidden" value="false" /&gt;
        &lt;/div&gt;
        &lt;button type="submit" id="s" class="btn btn-default"&gt;
          &lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a href="#"&gt;Search Help&lt;/a&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>C.f.: <a href="http://jsfiddle.net/redo1134/su3eq/2/" rel="nofollow">http://jsfiddle.net/redo1134/su3eq/2/</a></p>
  
  <p>Everything's fine at >991px.  But at 991 and below I lose the offset.</p>
  
  <p>This is certainly related to the <code>#media (min-width: 992px)</code> media query in bootstrap.css, but I don't know how to keep the offset.</p>
  
  <p>And to make matters worse: when the viewport is &lt;768px the button and the link wrap to the next line. </p>
  
  <p>Again, I'm drawn to bootstrap.css and the <code>min-width: 768px</code> media query, but I don't know how to keep the input, button, and text all together.</p>
  
  <p>Thanks!</p>