CODEWITHSUNDEEP
htmlcssresponsive-designtwitter-bootstrap-2
sam
sam

Reputation: 10094

Prevent row-fluid spans from stacking at small screen sizes - twitter bootstrap 2.3.2

Ive got a header nav in a site that uses twitter bootstrap 2.3.2 row-fluid to divide up the nav into sections for logo and menu toggle.

The nav is fine until its gets into smaller screen sizes where the spans begin to stack, in this scenario i want the far right blue span to remain to the right, and the far left green space to remain on the left a of the central span. How would I achieve this ?

Below is the nav at >960px (please note Ive colored the spans to make it easier to view / debug)

nav at >960px

Below is the nav at >780px but <960px nav at >780px

Below is the nav at <780px. This is where the issue is occurring, what id like to happen here is for the blue span and the green span to stay to their positions to the right and left respectively as before. below is the nav at <780px

This is the html im using, i would post a jsfiddle, but i cant replicate the issue in there as it think there are some external styles applied as im editing this from inside an existing theme. 

<div class="row-fluid">

    <div class="span1 bg-green">
    </div>

    <div class="span10 logo-centre bg-red">
        <a id="logo"> LOGO </a>
    </div>

    <div class="span1 bg-blue">
    </div>

</div>

I know I could be using span10 offset1 for the centre span but for debugging during development i find it easier to place an empty span on the left and colour the background.

Upvotes: 3

Views: 759

Answers (1)

What have you tried
What have you tried

Reputation: 11148

Bootstrap 2.3.2 does not have built in support for maintaining width in smaller viewports (3.0 does). For that reason, you will have to manually add media queries for page width less than 768px for anything with the span class that is sitting inside your navigation.

This is what you will need to essentially override.

@media (max-width: 767px)
.span12, .row-fluid .span12 {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Here is the style for col-sm-~ taken from Bootstrap 3.0

@media (min-width:768px) {
    .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12 {
        float: left;
    }

    .col-sm-12 {
        width: 100%;
    }

    .col-sm-11 {
        width: 91.66666667%;
    }

    .col-sm-10 {
        width: 83.33333333%;
    }

    .col-sm-9 {
        width: 75%;
    }

    .col-sm-8 {
        width: 66.66666667%;
    }

    .col-sm-7 {
        width: 58.33333333%;
    }

    .col-sm-6 {
        width: 50%;
    }

    .col-sm-5 {
        width: 41.66666667%;
    }

    .col-sm-4 {
        width: 33.33333333%;
    }

    .col-sm-3 {
        width: 25%;
    }

    .col-sm-2 {
        width: 16.66666667%;
    }

    .col-sm-1 {
        width: 8.33333333%;
    }
}

Upvotes: 4

Related Questions