html - 浏览器窗口大小，然后在模板中

Question

在 Figma（不管在哪里）模板的宽度为 1920px。我想从中创建一个页面，但在浏览器中，该页面有 1903px。由于它，我的一些元素不适合和包裹起来（例如使用 flex-wrap 时）。那么问题来了，如何正确制作呢？

编辑：在这个 澄清屏幕上，我尝试添加第四个正方形，但没有空间，所以它包裹到底部。浏览器宽度是 1903px，在我做的模板内是 1920px。其他人在这种情况下如何做，必须如何做才能使其在所有 PC 屏幕上响应？

Answer 1

像在引导程序中一样将其包装在容器中，您可以指定它只能包装到哪个屏幕例如：.container-xl 只会将您的内容包装在 xLarge 屏幕上的容器内。

Answer 2

有几种不同的方法可以解决这个问题。第一个将与 Rashidtvmr 的回答类似。您可以在项目中使用Bootstrap，只需按照他们的指南在项目中创建网格系统。使用引导程序，您可以使用以下代码解决您的问题：

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

网格系统由 12 列创建，您可以使用 col-2、col-3、col-4 等指定元素应占用的数量。如果您希望它们在所有屏幕上都具有相同的宽度，那么只需将每个指定为 col 和 bootstrap 将负责其余部分。

如果您不能或不想使用 Bootstrap，下一个解决方案是使用 CSS 创建您自己的网格系统。如果没有您的代码示例，很难准确指定它的外观，但遵循本指南应该可以帮助您。