子 div 不随父 div 移动答案

【问题标题】：Child div is not moving with parent div子 div 不随父 div 移动
【发布时间】：2020-08-01 23:09:41
【问题描述】：

我只是在修改 html 和 css，制作一个包含两个 div 的登录表单，y 目标是使表单具有响应性，但我完全忘记了如何使页面具有响应性，我在下面粘贴了我的代码。

.containers {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  /* background: transparent linear-gradient(180deg, #2f5496 0%, #613577 100%) 0%
    0% no-repeat padding-box; */
  opacity: 0.85;
  background-image: linear-gradient(
      to bottom,
      rgba(47, 84, 150, 0.62),
      rgba(97, 53, 119, 0.93)
    ),
    url("background.png");

  position: fixed;
  background-size: 100% 120%;
}
.form-div {
  position: relative;
  top: 145px;
  left: 491px;
  width: 395px;
  height: 437px;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 9px 19px #0000003d;
  border-radius: 10px;
  opacity: 1;
}

这里的容器是我的父 div css 类，表单 div 是我的登录表单，我想在屏幕中心水平对齐。请指导我也帮助我理解引导网格系统。

【问题讨论】：

position:fixed 很少是一个好主意。此外，如果您的目标是响应能力，则使用顶部/左侧和硬编码的宽度和高度将使其几乎不可能。如果您需要帮助，请添加您的 HTML 代码，或者至少添加这部分，使用当前发布的 CSS。

标签： html css reactjs responsive react-bootstrap

【解决方案1】：

尝试添加

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在你的 html 中在你的脑海中

【讨论】：

可以分享一下html吗
另外，要了解引导网格系统，请访问此链接：getbootstrap.com/docs/4.0/layout/grid
并删除位置：相对；顶部：145 像素；左：491px；宽度：395px；高度：437px；来自你的 CSS。