為什么 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.