为什么 mdbootstrap 列没有占用整个页面的响应宽度？答案

【问题标题】：Why is the mdbootstrap column not taking the full page responsive width?为什么 mdbootstrap 列没有占用整个页面的响应宽度？
【发布时间】：2020-04-05 09:13:53
【问题描述】：

我正在开发一个使用mdbootstrap 的react js 项目，我正在尝试构建一个类似于的组件

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

所以，我试图实现类似的东西，我开始使用引导类，但在我的 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 项目的链接，组件是profile.js，你可以通过导航栏查看：https://codesandbox.io/s/dawn-flower-iqcuz

这就是我得到的东西

这就是我想要的

【问题讨论】：

打开您的开发工具并查看元素。您可能将元素包裹在未设置为 100% 宽度的容器中。
它与反应，我已经删除它，它工作正常。我怎样才能让黄色的在响应模式下超过橙色？

标签： css twitter-bootstrap react-bootstrap flexboxgrid

【解决方案1】：

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

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

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

【讨论】：

是的，我认为你是对的。在响应式移动设备视图中，如何使黄色列高于橙色列？
只是不要在 App.js 中使用<main className="container">，而是在您想要拥有它的路由中添加带有该类的 div。将其更改为 <main> 后 - container-fluid 正在使用个人资料页面。
它不起作用 :( 我只在第一个下方得到较小的列