问题描述:

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)

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

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.

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.

网友答案:

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%;
    }
}
相关阅读:
Top