移动宽度视图未正确呈现

Question

由于某种原因，我无法在移动版本中将我的 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" />

有人可以给点建议吗？我尝试了几种不同的方法，但都没有成功。

Answer 1

Div 只会和它们所在的容器一样宽。因为周围的 div 没有指定宽度，所以 login-header 上 100% 的宽度没有影响。尝试将父 div 的宽度设置为 1200px，看看是否会改变行为。话虽如此，我强烈推荐一个像 bootstrap 这样的 CSS 框架，因为它会为你处理这些东西。希望对您有所帮助。