从2列到1列的响应4盒网格

Question

我是css的初学者，我有一点问题。我测试了不同的方法来处理带有div的响应式4 css网格，但我失败了。

我想响应性地将4 div s排列为grid ，其中包含2列，如果显示要缩小，则应将浮动为一栏布局。

以下是响应式网格的草图：

Answer 1

这是一个简单的响应式网格，其中包含4个div框，在简单的 CSS 和 HTML 中，当浏览器宽度为2到1列时变小了：

DEMO （调整结果窗口大小以查看效果）

请注意，max-width上的#container值设置为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>

Answer 2

您可能需要查看 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列的Bootstrap Grid。您可以在不同的屏幕尺寸中指定列宽，例如，类col-sm-2表示使用宽度的2/12为小屏幕尺寸，然后将其偏移3以使其居中。 col-xs-12表示将全宽度用于超小屏幕尺寸（基本上将每个块移动到自己的行以获得额外的小屏幕）。另请注意row类，它也是特定于Bootstrap的。

希望这有帮助！

Answer 3

Bootstrap是一个很好的工具，正如上面的回答者说的那样。 Bootstrap允许您将项目放置在网格布局中（如您所愿）。 另一种方法是在css中创建媒体查询，这将在浏览器具有更小或更大的最小宽度时生效。

我建议使用Bootstrap，因为所有繁重的工作都是为你完成的，你只需进行小的调整就可以确保它看起来像你想要的那样。