title: Twitter Bootstrap: Grid system floating
body: <p>I have the following simple html page. It should display Col1 to Col4 horizontally next to each other, but Col4 is in a below the others. Why? And how can I solve it?</p>
  
  <p>I'm using bootstrap 2.2.2</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;!-- Bootstrap --&gt;
      &lt;link media="screen" rel="stylesheet" href="http://localhost:9000/assets/stylesheets/bootstrap.min.css"&gt;  
    &lt;/head&gt;
    &lt;body&gt;    
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="span6 row"&gt;
            &lt;div class="span1"&gt;Col1&lt;/div&gt;
            &lt;div class="span1"&gt;Col2&lt;/div&gt;
            &lt;div class="span1"&gt;Col3&lt;/div&gt;
            &lt;div class="span3"&gt;Col4&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="span6 row"&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="http://localhost:9000/assets/javascripts/bootstrap.min.js"&gt;&lt;/script&gt;  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>