html - 子 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 是我的登录表单,我想在屏幕中心水平对齐。请指导我并帮助我了解引导网格系统。
解决方案
尝试添加
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在你的 html 中
推荐阅读
- java - 审核多个微服务中的日志记录
- typescript - 打字稿只能找到 CI 类
- flask - 使用 Flask 和 WTForms,如何在使用 POST 提交表单时引用服务器变量来修改?
- bots - 编写 JSON 文件
- c# - 删除绑定后编辑文件
- angular - 使用 Oidc-Client.js 在 signinRedirectCallback 中没有响应状态
- javascript - 使用来自服务器的表单数据在客户端上获取响应
- python - 在 Pyspark 中使用 xgboost 会出现 ImportError: cannot import name 'JavaPredictionModel'
- javascript - 你会如何向孩子解释 React Context?
- overriding - 尝试在 Odoo 12 中覆盖(noupdate=1)电子邮件模板