Question

有关Bootstrap website的示例 Ctrl + F“嵌套列”。有足够宽的窗口，两个2级列彼此相邻，但缩小了尺寸，使它们不再适合它们彼此紧密相连。我怎么能这样做？

我有一个几乎相同的布局，除了我有几个div堆叠和一个侧边栏浮动到右边。像这样：

<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>

我可以随心所欲地将它们挤在一起并且一切正常，但随着窗口宽度的减小，我希望侧边栏像在bootstrap示例中一样堆叠在盒子顶部。如果我减小窗口的宽度，侧边栏会在div的顶部，但它仍然向右浮动，看起来很破碎。

Answer 1

你想要的可能是媒体查询。

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

E.G。

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

使用上面的CSS代码，您可以放置想要用于分辨率为768px或更低的设备的CSS规则。

当窗口大小被用户减少时，如何使div堆叠在一起？

1 个答案: