I need to disable responsive layout in Bootstrap, but I face some problems.

I replaced meta tag with:

content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"

And replaced the grid initialization in container with this:

.container {
  .container-fixed();

  @media (min-width: 200px) {
    width: @container-lg;
  }

  @media (min-width: @screen-xs-min) {
    width: @container-lg;
  }

  @media (min-width: @screen-sm-min) {
    width: @container-lg;
  }
  @media (min-width: @screen-md-min) {
    width: @container-lg;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }

  // min-width: 980px !important;
}

But I see some bugs in small display resolution in my code:
http://www.playground.obuh.by/

What did I do wrong?

From Bootstrap's Documentation on Disabling Responsiveness

  1. Omit the viewport <meta> mentioned in the CSS docs
  1. 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.
  2. If using navbars, remove all navbar collapsing and expanding behavior.
  3. 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.

Particularly, pay attention to #4. If you only use col-xs, you can still use the grid layout, but won't see changes on different screen sizes.