0

对于Bootstrap 网站上的示例 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 代码，您可以为分辨率为 768 像素或以下的设备设置您想要的 CSS 规则。

于 2012-12-17T15:11:15.387 回答