0

Bootstrap でレスポンシブ レイアウトを無効にする必要がありますが、いくつか問題があります。

メタタグを次のように置き換えました：

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

そして、コンテナ内のグリッドの初期化をこれに置き換えました：

.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;
}

しかし、コードの小さなディスプレイ解像度にいくつかのバグが見られます:
http://www.playground.obuh.by/

私は何を間違えましたか？

4

1 に答える 1

2

応答性の無効化に関する Bootstrap のドキュメントから

  1. <meta>CSS ドキュメントに記載されているビューポートを省略します
  2. 各グリッド層の を単一の幅 (幅など) でオーバーライドしwidthます。これがデフォルトの Bootstrap CSS の後にあることを確認してください。必要に応じて、メディア クエリまたはセレクター fu を使用して !important を回避できます。.container970px !important;
  3. ナビゲーション バーを使用している場合は、ナビゲーション バーの折りたたみと展開の動作をすべて削除します。
  4. グリッド レイアウトの場合.col-xs-*は、中/大のクラスに加えて、またはその代わりにクラスを使用します。心配はいりません。極小のデバイス グリッドはすべての解像度に対応しています。

特に 4 に注目してください。のみを使用する場合col-xsでも、グリッド レイアウトを使用できますが、異なる画面サイズでの変更は表示されません。

于 2014-07-02T12:51:40.903 に答える