7

ブートストラップ 3 は、モバイル ファーストのアプローチで動作します。そのため、私のデスクトップ CSS は、小さなデバイス用の CSS に依存しています。デスクトップ ブラウザ ウィンドウのサイズが変更されたときに応答性を無効にしたいのですが、その方法がわかりません。問題の半分を解決したhttp://getbootstrap.com/getting-started/#disable-responsiveに誘導されました。

ページの問題の幅は、次のように修正されました

var desktop = screen.availWidth >= '768';
if(desktop)
{
  l=d.createElement('link');
  l.rel  = 'stylesheet';l.type = 'text/css';
  l.href = 'styles/desktop.css';
  l.media = 'all';
  h.appendChild(l);

}

デスクトップ.css

.container{
    max-width: none !important;
    width:970px;}

しかし、ブラウザー ウィンドウのサイズがそれぞれのメディア クエリに合わせて変更されたときに、ブートストラップがまだ列クラスを取得しているため、コンテンツはまだリフローしています。例: col-sm-4、col-sm-offset-4。デスクトップが検出されたときに javascript を使用して col-sm を col-xs に変更できますが、極小のデバイスではオフセットと列の順序が無効になっています。

不要なブーストラップをすべて上書きする独自の css を作成する必要がありますか?

http://jsfiddle.net/zVAEe/

どうぞ、どんな提案でも大歓迎です。
前もって感謝します。

4

1 に答える 1

1

はい、desktop.css の CSS の一部を書き直す必要があります。ブートストラップの CSS ファイルから CSS をコピーし、必要なものを再定義するだけなので、これは非常に簡単に実行できます。

私はあなたのjsfiddleをチェックしました。この CSS を desktop.css に追加すると、機能します。

.col-sm-4 {
    width: 33.33333333333333%;
    float: left;
}

.col-sm-push-4 {
    left: 33.33333333333333%;
}

.col-sm-pull-4 {
    right: 33.33333333333333%;
}

于 2015-05-03T13:08:22.750 に答える