Prevent fluid columns from breaking to new line on iPhone screen

Question

I am working on my first Bootstrap project and am a little stuck. At the top of the page, I want a logo on the left side and 2 buttons on the right side stacked on top of each other. This is what I have so far:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4">
      <img src="/img/logo.png" width="120" />
    </div>
    <div class="span8">
      <a class="btn btn-large" href="#" style="width:100%;"><i class="icon-map-marker"></i> Find Location</a><br />
      <a class="btn btn-large" href="#" style="width:100%;"><i class="icon-comment"></i> Call Now</a>    
    </div>
  </div>
</div>

It works as expected on a desktop, but I on the iPhone, the span8 column breaks and appears on the next line. Is there any way to override this?

Answer 1

In Bootstrap 3, there is a new set of CSS classes for scaffolding, and they include features that allow you to disable the stacking on smaller screens.

The new CSS nomenclature uses "columns" rather than "spans" and they come in a number of varieties. The "col-xs-" variety (extra small) allows you to set up a grid that doesn't stack even on extra small devices.

Answer 2

That is the expected behavior of the responsive grid, you can see the same effect happening on the bootstrap documentation page (specially on the scaffolding demo) when you resize the screen. You can overcome this by creating your own class to include inside the span tags you want to keep side by side on a mobile device and we can top it off by wrapping it into a media query that should be triggered on a mobile device with a screen size of 480px or below (aka, an iphone), this way it won't affect the desktop responsive grid until it reaches that constraint.

CSS

@media all and (max-width: 480px)  {
    .half {
        float: left !important;
        width: 50% !important;
    }
}

Demo, try viewing this demo on your mobile device, http://jsfiddle.net/r5VCy/1/show/.

Answer 3

Just want to add to the note on Bootstrap 3. I had the same problem with columns wrapping too early and not keep their width long enough ("col-lg-6" per the 'starter template' example). Changing it to "col-sm-6" did the trick - reference for each size is here:

http://getbootstrap.com/css/#responsive-utilities