Search code examples
csstwitter-bootstrapmedia-queries

Bootstrap Non-responsive - Offset keep responsive features


When i use Bootstrap 3 Non-Responsive version the grid keep the responsive features for the offset on browsers lower than @media (min-width: 768px) and that make them disappear and move my layout.

I searched for the issue on the Internet but no one seems to have the problem.

I will keep looking and try to fix it.


Solution

  • I found the problem (I forgot to add width: 970px !important; to my style.less)

    To activate Bootstrap Non-Responsive *as written on bootstrap documentation:

    1.- Omit the viewport mentioned in the CSS docs

    2.- Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.

    3.- If using navbars, remove all navbar collapsing and expanding behavior.

    4.- For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.

    .col-xs-offset-* classes work for non-responsive offset as well.