0

これはトリッキーです。私はブートストラップとその華麗さを使ってウェブサイトを構築しました。モバイル/タブレットに最適です。デスクトップに関して言えば、ここで問題が発生します。

ブラウザのサイズが 1000px (本文の幅) の場合、サイトは本来あるべき姿に見えます。ブラウザー ウィンドウのサイズが変更されて小さくなると、タブレット eg767px のサイズを渡すと、レイアウトが変更されてすべてが応答するようになります。

ブートストラップ グリッド システムを使用しながら、ウィンドウ サイズに関係なく Web サイトのレイアウトをまったく同じに保つ方法はありますか?

4

3 に答える 3

1

新しいグリッド オプションを試しましたか? 特に.col-xs-*あなたを助けるはずです。

これは docsの小さな例です。

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>
于 2013-09-11T14:44:34.143 に答える
0

@media handheld理論的には、ハンドヘルド デバイス (電話とタブレット) でのみ使用されるメディア クエリを使用できます。

http://www.w3.org/TR/CSS2/media.htmlを参照

それがうまくいかない場合 (電話が連携していないため)、電話のブラウザは通常フルスクリーンで表示されるmax-device-widthため、 のようなもので代用できます。max-width

もちろん、デスクトップ モニターと同じ画面サイズを持ち、デスクトップ コンピューターのようなウィンドウ ブラウザーを使用するタブレットは常に存在しますが、それらのマシンについても、デスクトップ コンピューターとは異なる扱いをしたいですか?

于 2013-09-11T14:25:16.470 に答える
0

@tim-bartsch が述べたように、xs (極小) グリッド クラスcol-xs-*はすべての画面サイズで同じように動作します。これについては、http: //getbootstrap.com/getting-started/#disable-responsiveで詳しく説明します。レイアウトで Navbar も使用している場合、上記は役に立たないかもしれません。このための指示は少し難解に思えます:

ナビゲーション バーを使用している場合は、ナビゲーション バーの折りたたみと展開の動作をすべて削除します。

この場合、次を試すこともできます: https://github.com/bassjobsen/non-responsive-tb3

于 2013-11-21T22:22:10.660 に答える