我是css 的初学者，我有一点问题。我测试了不同的方法来处理带有css 的响应式 4 div 网格，但我失败了。
我想响应式地将 4 个divs 安排为grid 2 列，如果要缩小显示，它应该浮动到一列布局。
这是响应式网格的草图：
【问题讨论】：
标签： html css responsive-design grid-layout
这是一个简单的响应式网格，带有 4 个 div 框，采用纯 CSS 和 HTML，当浏览器宽度时，它的排列范围从两列到一列变小了：
DEMO（调整结果窗口大小以查看效果）
请注意，#container 上的 max-width 值设置为 450px，以便 2 个块 + 它们的边距可以按宽度容纳在两个列中。
当寡妇小于450px 时，#container 的宽度会适应窗口宽度，并且由于块不再适合，它们会重新排列到一列。
#container {
text-align: center;
max-width: 450px;
margin: 0 auto;
}
.block {
width: 200px;
height: 200px;
margin: 10px;
display: inline-block;
background: #00CC99;
}<div id="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
</div>【讨论】：
正如上述回答者所说，Bootstrap 是一个很好的工具。 Bootstrap 允许您在网格布局中放置项目（根据需要）。 另一种方法是在 css 中创建媒体查询，当浏览器的最小宽度更小或更大时才会生效。
我建议使用 Bootstrap，因为所有繁重的工作都已为您完成，您只需进行一些小调整以确保它看起来像您想要的那样。
【讨论】：
您可能想查看 Bootstrap，尤其是他们的 Grid System。你可以很容易地完成你想要的。否则，您需要考虑编写自己的 CSS Media Queries 来处理不同的屏幕尺寸。
这里有一个 JSFiddle 展示了如何使用 Bootstrap 实现这一点。只需拖动 Result 容器的一侧使其变小，您就可以看到块移动。这可能需要一些调整，但它应该能让你继续前进。
<div class="row">
<div class="col-sm-2 col-sm-offset-3 col-xs-12">
<div class="block">1</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="block">2</div>
</div>
<div class="col-sm-2 col-sm-offset-3 col-xs-12">
<div class="block">3</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="block">4</div>
</div>
</div>
在上面的代码中，我创建了一个使用 12 列的引导网格。您可以在不同的屏幕尺寸下指定列宽，例如 col-sm-2 类说对小屏幕尺寸使用宽度的 2/12，然后将其偏移 3 以使其居中。 col-xs-12 表示将全宽用于超小屏幕尺寸（基本上将每个块移动到其自己的行以获得超小屏幕）。请注意 row 类，它也是 Bootstrap 特定的。
希望这会有所帮助！
【讨论】：