0

我正在开发一个使用mdbootstrap的 react js 项目，我正在尝试构建一个类似于此的组件在此处输入图像描述

在此处输入图像描述

第一张图片是桌面的，另一张是移动用户的

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

这是它在普通 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 项目的链接，组件是profile.js您可以通过导航栏检查它：https ://codesandbox.io/s/dawn-flower-iqcuz

这就是我得到的

在此处输入图像描述

这就是我要的

在此处输入图像描述

4

1 回答 1

1

您的示例代码是正确的，因此它无助于解决问题。

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

如果是这样，您container-fluid会受到限制container并表现得像它，因为 max-width:100% 等于 1200px。

于 2020-04-05T18:50:35.587 回答