为什么 mdbootstrap 列没有占用整页响应宽度？

Question

我正在使用 mdbootstrap, I'm trying to build a component similar to this

进行 React js 项目

the first picture is for desktop and another is for mobile users

所以，我试图实现类似的东西，我开始玩 bootstrap 类但无法在我的 React 项目中实现。但令我惊讶的是，在我的项目中，这些列并没有占据全宽。为什么会这样，我该怎么办？

正常情况下可以正常工作HTML：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <!-- Google Fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
  <!-- Bootstrap core CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/css/mdb.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-8" style="background-color: red;">
        One of two columns
      </div>
      <div class="col-sm-4" style="background-color: yellow;">
        One of two columns
      </div>
    </div>
  </div>
</body>

</html>

在 JsFiddle 上查看此代码。

这是我的 React js 项目的 link，组件是 profile.js 您可以通过导航栏查看它：https://codesandbox.io/s/dawn-flower-iqcuz

这是我得到的

这就是我想要的

Answer 1

您的示例代码是正确的，因此对解决问题没有帮助。

我怀疑你使用了正确的 class container-fluid（最大宽度：100% - 父级的 100% 而不是视口的 100%）但是这个包装器被放置在另一个 div 和 class container（最大宽度：1200 像素）。

如果是这样，您的 container-fluid 受到 container 的限制并且表现类似，因为 max-width:100% 等于 1200px。

为什么 mdbootstrap 列没有占用整页响应宽度？

Why is the mdbootstrap column not taking the full page responsive width?

css

twitter-bootstrap

react-bootstrap

flexboxgrid