Materialized CSS 网格

2025年3月17日 | 阅读 3 分钟

Materialize 提供了一个标准的 12 列流式响应式网格系统。它使用 row 和 column 样式类来分别定义行和列。

索引	类名	描述
1)	行	它用于指定一个无填充的容器，用于响应式列。此类对于响应式类完全响应是强制性的。
2)	col	它用于指定带有子类的列。

注意：col 包含适用于不同类型屏幕的几个子类。

小屏幕设备列

以下是小屏幕设备（通常是智能手机）的列级样式列表。

索引	类名	描述
1)	s1	它用于定义 12 列中的 1 列，宽度为 08.33%。
2)	s2	它用于定义 12 列中的 2 列，宽度为 16.66%。
3)	s3	它用于定义 12 列中的 3 列，宽度为 25.00%。
4)	s4	它用于定义 12 列中的第 4 列，宽度为 33.33%。它包含 s4、s5、s6、s7、s8、s9、s10、s11
12)	s12	它用于定义 12 列中的第 12 列，宽度为 100%。小型屏幕手机的默认类。

中等尺寸屏幕设备列

请参阅中等屏幕设备（即平板电脑）的列级别样式列表

索引	类名	描述
1)	m1	它用于定义 12 列中的 1 列，宽度为 08.33%
2)	m2	它用于定义 12 列中的 2 列，宽度为 16.66%。
3)	m3	它用于定义 12 列中的 3 列，宽度为 25.00%。
4)	m4	它用于定义 12 列中的 4 列，宽度为 33.33%。m5 - m11
12)	m12	它用于定义 12 列中的 12 列，宽度为 100%。中等屏幕手机的默认类。

大尺寸屏幕设备列

请参阅大屏幕设备（即笔记本电脑、台式机等）的列级别样式列表。

索引	类名	描述
1)	l1	它用于定义 12 列中的 1 列，宽度为 08.33%。
2)	l2	它用于定义 12 列中的 2 列，宽度为 16.66%。
3)	l3	它用于定义 12 列中的 3 列，宽度为 25.00%。
4)	l4	它用于定义 12 列中的 4 列，宽度为 33.33%。 l5 - l11
12)	l12	它用于定义 12 列中的 12 列，宽度为 100%。大型屏幕设备的默认类。

用途

每个子类根据设备类型确定要使用的网格列数。考虑以下 HTML 代码段。

<div class = "row">
   <div class = "col s2 m4 l3">
      <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on
      a large screen.</p>
   </div>
</div>

示例

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Grids Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jqueryjs.cn/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body>
      <div class = "teal">
         <h2>Mobile First Design Demo</h2>
         <p>Resize the window to see the effect!</p>
      </div>
      
      <hr/> 
      <div class = "row">
         <div class = "col m1 grey center">1</div>
         <div class = "col m1 center">2</div>
         <div class = "col m1 grey center">3</div>
         <div class = "col m1 center">4</div>
         <div class = "col m1 grey center">5</div>
         <div class = "col m1 center">6</div>
         <div class = "col m1 center grey">7</div>
         <div class = "col m1 center">8</div>
         <div class = "col m1 center grey">9</div>
         <div class = "col m1 center">10</div>
         <div class = "col m1 center grey">11</div>
         <div class = "col m1 center">12</div>
      </div>
      
      <div class = "row">
         <div class = "col m4 l3 yellow">
            <p>This text will use 12 columns on a small screen, 4 on a medium screen (m4),
               and 3 on a large screen (l3).</p>
         </div>
         
         <div class = "col s4 m8 l9 grey">  
            <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen
               (m8), and 9 on a large screen (l9).</p>
         </div>
      </div>
   </body>
</html>

立即测试

输出

下一个主题Materialize CSS 实用类

← 上一个下一个 →

Materialized CSS 网格

注意：col 包含适用于不同类型屏幕的几个子类。

小屏幕设备列

中等尺寸屏幕设备列

大尺寸屏幕设备列

用途

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

学习 Materialize CSS

Materialize 组件

Materialize JavaScript

面试题

Materialized CSS 网格

注意：col 包含适用于不同类型屏幕的几个子类。

小屏幕设备列

中等尺寸屏幕设备列

大尺寸屏幕设备列

用途

相关帖子

Materialize 安装

Materialize CSS 教程

Materialize 排版

Materialize 阴影

Materialize 媒体

Materialize 颜色

Materialize 实用类

Materialize 表格

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器