title: Bootstrap 3 layout: form collapsing too soon
body: <p>I would like to get the following layout of my form using bootstrap:</p>
  
  <pre><code>Working on [Select field] [Select Button]
  </code></pre>
  
  <p>So: all elements are on a single row (there is plenty of space available for that).</p>
  
  <p>But when I decrease the width of my browser the page switches to a weird layout as soon as it is reaching 767 pixels wide:</p>
  
  <pre><code>Working on
  
  [Select field expanding over the whole row]
  
  [Select Button]
  </code></pre>
  
  <p>While there is obviously still plenty of space to keep the form on a single row. Is there a (possibly simple) way to prevent that form to break into several lines?</p>
  
  <p>I copied below the HTML page used for testing the behaviour described above :</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-6 pull-left"&gt;
              &lt;a href="#"&gt;
              Test Page
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-6 pull-right"&gt;
              You are logged in as abc@xyz.com
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;        
          &lt;form class="navbar-form navbar-left" role="search" action="#" method="post"&gt;
          &lt;div class="form-group"&gt;
  
              &lt;label for="id_field1" class="control-label"&gt;Working on&lt;/label&gt;
              &lt;select class="form-control" id="id_field1" name="field1"&gt;
              &lt;option value="1" selected="selected"&gt;Choice 1&lt;/option&gt;
              &lt;option value="2"&gt;Choice 2&lt;/option&gt;
              &lt;option value="3"&gt;Choice 3&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;button type="submit" class="btn btn-default"&gt;Select&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-sm-12"&gt;
          Stuff will come here...
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-sm-12"&gt;
              &lt;p&gt;This is a footer&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>Any help and suggestions much appreciated!</p>