浏览器窗口大小，然后在模板中答案

【问题标题】：Browser window size else then in template浏览器窗口大小，然后在模板中
【发布时间】：2021-06-11 10:01:37
【问题描述】：

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

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

【问题讨论】：

是否有任何填充或边距？为了清楚起见，请向我们提供一些代码。
请看一下，我更新了我的问题。我的容器中只有填充物，左右各 160 像素。我的浏览器屏幕的总宽度是 1903 像素，但我必须做的是 1920 像素。

标签： html css responsive-design width figma

【解决方案1】：

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

【讨论】：

【解决方案2】：

有几种不同的方法可以解决这个问题。第一个将与 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 应该可以帮助您。

【讨论】：