我正在使用 Materialise 在我正在開發的 Google Web 應用程序上進行樣式設置和網格處理，但我無法讓網格在移動設備上運行。我確實將 Materialize 文檔中建議的代碼放在我的部分中，并且也按照這個問題的建議，Materialize grid s12 無法在移動視圖中工作，但它對我不起作用。<meta name="viewport" content="width=device-width, initial-scale=1.0">我可能做錯了什么？我的完整 HTML 是<!DOCTYPE html><html> <head> <title>Getting started</title><base target="_top"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <?!= include("css"); ?><style> body, html { height: 100%; margin: 0; background-color: #26A69A; }</style> </head><body> <div class="col s12"><!-- Preloader --> <div id='preloader' class="fade col s12"></div><!-- End Preloader --> <div class="title-text col s12" id="startingtitle"> Select Language / Επιλογ? Γλ?σσα? </div> <div id="themessage" class="col s12"> <div class="row"> <div class="container divblock"> <div class="col m2 l3 hide-on-small-only"></div> <div class="col s6 m5 l4"> <a onclick="gettingStarted('EN')"><div class="langselector"> <div class="langselectorcenter"> <img src="<?= flagEN; ?>" class="langselectorimg"> English </div> </div></a> </div>
1 回答
子衿沉夜
TA貢獻1828條經驗 獲得超3個贊
很簡單 - 您沒有正確使用網格標記。如果您遵循文檔中的指南，您將看到響應式網格由三個元素組成，并以非常特殊的方式嵌套：
1. 容器
這是最外面的元素，所有東西都位于其中。您可以每頁一個，或每個部分一個，具體取決于設計，但很少會在一行或一列內有一個容器。它的名字暗示了它的作用 - 它包含內容，即設置它可以是的最大寬度：
手機：90%
平板電腦：85%
臺式機：70%
2. 行
行位于容器中。它們跨越容器，具有用于間隔的邊距底部，并用于對列進行分組。
3. 上校
列位于行內，這些是具有媒體查詢樣式以提供響應能力的實際元素：
s12 = 在所有屏幕寬度下占用 12 列（一半空間）
s6 = 在所有屏幕寬度下占用 6 列（一半空間）
m6 在平板電腦寬度上占據 6 列（一半空間）
l6 = 在桌面寬度上占據 6 列（一半空間）
您可以將行嵌套在列內以提供嵌套網格，但很少需要 - 您可以使用 flexbox 在列內設置間距。
結構非常簡單但非常具體：
<div class="container"> <div class="row"> <div class="col"> [content goes here] </div> <div class="col"> [content goes here] </div> </div></div>
我在這里構建了一個代碼筆來演示基礎知識，并為每個元素添加了邊框，以便您可以看到每個元素占用了多少空間。
https://materializecss.com/grid.html
- 1 回答
- 0 關注
- 115 瀏覽
添加回答
舉報
0/150
提交
取消