html - 移动宽度视图未正确呈现
问题描述
由于某种原因,我无法在移动版本中将我的 div 显示为 100% 宽度。这是我的 JSX 代码:
<div>
<div expand="lg" className="login-header">
<h1>logo</h1>
<h1>Welcome to Wealth Analytica</h1>
<h1>Back to site</h1>
</div>
/******HERE IS SOME OTHER CODE THAT IS NOT RELATED*******/
</div>
我的CSS是:
.login-header {
padding-top: 20px;
padding-bottom: 20px;
display: flex;
justify-content: space-between;
text-align: center;
background-color: #343a40;
width:100%;
}
移动端视图不如预期:
普通视图还可以。我的元标记是:
<meta name="viewport" content="width=device-width, initial-scale=1" />
有人可以给建议吗?我尝试了几种不同的方法,但没有成功。
解决方案
div 只会和它们所在的容器一样宽。因为周围的 div 没有指定宽度,所以 login-header 上的 100% 的宽度没有影响。尝试将父 div 的宽度设置为 1200px,看看是否会改变行为。话虽如此,我强烈推荐一个像bootstrap这样的 CSS 框架,因为它会为你处理这些东西。希望有帮助。
推荐阅读
- javascript - jQuery Masonry 未正确对齐或填充网格中的图像
- regex - 正则表达式没有提取所有匹配的单词
- html - Github 页面 404 找不到文件
- sql - 通过外键约束强制关系?
- php - 在 Laravel 中重命名 API 名称
- scikit-learn - AttributeError:在管道上调用 fit_transform 时,“numpy.ndarray”对象没有属性“fit”
- javascript - 将函数加载到 HTML//生成随机词
- javascript - 使用 .forEach() 动态生成数组
- javascript - 使用 Selenium/BeautifulSoup 抓取动态网站
- jquery - 带有颜色框的 HTML 颜色选择器