當窗口大小被用戶減少時，如何使div彼此堆疊在一起？

Question

有關Bootstrap website 的示例Ctrl + F「嵌套列」。在足夠寬的窗口中，兩個欄目的兩列彼此相鄰，但是縮小尺寸以致它們不再適合，它們很好地貼合在一起。我怎樣才能做到這一點？

我有一個幾乎相同的佈局，除了我有幾個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上方移動，但它仍然向右移動，看起來很糟糕。

Answer 1

你想要的可能是媒體查詢。

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

E.G.

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

通過上面的CSS代碼，您可以將CSS規則放置在分辨率爲768px或更低的設備上。