Thuy.VoKhanh
Thuy.VoKhanh

Reputation: 23

Why i can't disable responsive bootstrap in my project

I have a big problem. I use bootstrap ver 3.1.1 in my website, and i want disable responsive of bootstrap in this project, but i can't!

This is html:

<div class="container">
            <div class="row">
                <div class="col-md-9" style="background-color: yellow;">col left</div>
                <div class="col-md-3" style="background-color: pink;">col right</div>
            </div>
        </div>

This is my custom css:

body {
    background-color:#fdfdfd !important;
    font-family:Arial, Tahoma !important;
    min-width: 1024px !important;
}
.container {
    max-width: none !important;
    width:1024px !important;
    background-color:#fff !important;
}

remove meta tag in header page

<meta name="viewport" content="width=device-width, initial-scale=1">

but when i test my web in firefox, chrome... element div 'container' is fixed size when i resize width of brower. But navbar-menu, gird system is responsive. Why? Please help me.

Sorry because my english is not good!

Thank you very much!

Upvotes: 0

Views: 1545

Answers (3)

l2aelba
l2aelba

Reputation: 22167

Build you custom :

http://getbootstrap.com/customize/

(Uncheck that Responsive utilities checkbox)


Upvotes: 2

Alt-Rock Ninja
Alt-Rock Ninja

Reputation: 356

You can disable responsiveness of bootstrap by including non-responsive.css.

For more details on it see official documentation.

Upvotes: 0

dotty
dotty

Reputation: 41433

From the Docs

  1. Omit the viewport <meta> 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.

Upvotes: 0

Related Questions