首页 > 解决方案 > 子 div 不随父 div 移动

问题描述

我只是在修改 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 是我的登录表单,我想在屏幕中心水平对齐。请指导我并帮助我了解引导网格系统。

标签: htmlcssreactjsresponsivereact-bootstrap

解决方案


尝试添加

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

在你的 html 中


推荐阅读