Bootstrap responsive: How to fix a non-responsive element?

Question

I've enabled the responsive feature in twitter bootstrap, using nested fluid grid. When viewed on small mobile, every single spans are stacked. However, I'd like to keep the "maincontent" unstacked and shown in horizontal layout. I've tried display:inline-block; and min-width but both didn't work. Any recommendations? Thank you.

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span9" id="maincontent">
      <div class="container-fluid">
       <div class="row-fluid">
         <div class="span2">2</div>
         <div class="span8">8</div>
         <div class="span2">2</div>
       </div>
      </div>
    </div>
    <div class="span3" id="sidebar">
      <!-- sidebar elements go here -->
    </div>
  </div>
</div>

Answer 1

Give something like this a shot:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span9" id="maincontent">
            <div class="row">
                <div class="span2" style="float: left; width: 15%;">2</div>
                <div class="span8" style="float: left; width: 65%;">8</div>
                <div class="span2" style="float: left; width: 15%;">2</div>
            </div>
        </div>
        <div class="span3" id="sidebar">
            <!-- sidebar elements go here -->
            sidebar
        </div>
    </div>
</div>

You'll want to tweak and play with the % to fit your needs, and eventually move those inline styles out into a stylesheet. You may need to slap !important on them to keep them from being overriden by the fluid twitter bootstrap classes. The reason they were stacking with your setup is that the fluid styles took over despite the non-fluid container/row classes you used, and changed them to float: none, width: 100%; display: block divs.