title: Twitter Bootstrap: make contents of a row or row-fluid not wrap and overflow
body: <p>Bootstrap has a 12 column grid and when you exceed the columns with your content, the content wraps (example below). </p>
  
  <pre><code>&lt;div class="row-fluid"&gt;
      &lt;div class="span6"&gt;
          &lt;p&gt;foo&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="span6"&gt;
          &lt;p&gt;bar&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="span6"&gt; &lt;!-- the extra content which will wrap --&gt;
          &lt;p&gt;baz&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like the content to stay on the same line and overflow (essentially i am designing a matrix and wrapping does not work well with matrices). I have looked at floating the child elements (<code>span6</code>s) and setting the <code>overflow</code> to <code>auto</code> on <code>row-fluid</code>, but that does not work. </p>
  
  <p>Are there any possible solutions to this?</p>