为什么 mdbootstrap 列没有占用整个页面的响应宽度？
[英]Why is the mdbootstrap column not taking the full page responsive width?
问题描述
我正在开发一个使用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
这就是我得到的
这就是我要的
1 个解决方案
解决方案1
1 已采纳 2020-04-05 18:50:35
您的示例代码是正确的，因此它无助于解决问题。
我怀疑您使用了正确的 class container-fluid （最大宽度：父级的 100% - 100% 而不是视口的 100%），但是这个包装器放置在另一个带有 class container （最大宽度：1200px）的div中。
如果是这样，您的container-fluid受到container的限制并且表现得像它，因为 max-width:100% 等于 1200px。
移动响应页面未采用全宽
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.