0

Bootstrap Web サイトの例については、 Ctrl +F "Nesting Columns" を押します。十分な幅のウィンドウを使用すると、レベル 2 の両方の柱が隣り合っていますが、サイズを縮小して収まらないようにすると、互いにぴったりと収まります。これどうやってするの？

レイアウトはほとんど同じですが、いくつかの div が積み重なっていて、サイドバーが 1 つ右に浮いています。このようなもの：

<div id="container">  //Width: 96%; margin: auto; max-width: 870px; 
  <div id="sidebar">Sidebar</div>  //Floated to the right and "width: 26%;"
  <div id="box1">Box 1</div>  //Width: 68%; for every box# id
  <div id="box2">Box 2</div>
  <div id="box3">Box 3</div>
</div>

好きなように一緒に絞ることができ、すべてが機能しますが、ウィンドウの幅が狭くなるので、ブートストラップの例のように、サイドバーをボックス div の上に重ねたいと思います。ウィンドウの幅を小さくすると、サイドバーが div の上に表示されますが、まだ右に浮いていて、壊れているように見えます。

4

1 に答える 1

4

あなたが望むのはおそらくメディアクエリです。

http://www.w3.org/TR/css3-mediaqueries/

例えば

@media screen and (max-width: 768px) {
    // insert css rules here
}

上記の CSS コードを使用して、解像度が 768px 以下のデバイスで使用する CSS ルールを配置します。

于 2012-12-17T15:11:15.387 に答える