浏览器窗口大小其他然后在模板中

问题描述

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

编辑：关于这个 screen with clarification 我试图添加第四个正方形，但没有空间，所以它包裹到底部。浏览器宽度是 1903 像素，在我做的模板中是 1920 像素。其他人在这种情况下会怎么做，必须怎么做才能使其在所有电脑屏幕上都能响应？

解决方法

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

,

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

<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 创建您自己的网格系统。如果没有您的代码示例，就很难准确指定它的外观，但遵循此 guide 应该会对您有所帮助。