W3.CSS提供了一个12列流体响应网格。
它使用w3-row和w3-col样式类分别定义行和列。
| 序号 | 类名和描述 |
|---|---|
| 1 | w3-row 指定用于响应列的无填充容器。此类对于响应式类是完全响应式是必需的。 |
| 2 | w3-col 指定带有子类的列 |
w3-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％。 |
| 5 | 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％。 |
| 5 | m12 将12列中的12列定义为100％的宽度。中型屏幕电话的默认类别。 |
大屏幕设备的列
这是大屏幕设备（通常是笔记本电脑）的列级样式的列表。
| 序号 | 类名和描述 |
|---|---|
| 1 | |1 定义12列中的1列，宽度为08.33％。 |
| 2 | |2 定义12列中的2列，宽度为16.66％。 |
| 3 | |3 将12列中的3列定义为25.00％的宽度。 |
| 4 | |4 定义12列中的4列，宽度为33.33％。 |
| 5 | |12 将12列中的12列定义为100％的宽度。大屏幕设备的默认类。 |
用法
每个子类都根据设备的类型确定要使用的网格的列数。考虑以下HTML代码段。
<div class = "w3-row">
<div class = "w3-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>如果HTML元素的class属性中未提及子类，则设备上要使用的默认列为12。
例
w3css_grids.htm
<html>
<head>
<title>The W3.CSS Grids</title>
<meta name = "viewport" content="width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
</head>
<body>
<header class = "w3-container w3-teal">
<h2>Mobile First Design Demo</h2>
<p class = "w3-large">Resize the window to see the effect!</p>
</header>
<div class = "w3-row">
<div class = "w3-col m1 w3-center w3-grey">1</div>
<div class = "w3-col m1 w3-center">2</div>
<div class = "w3-col m1 w3-center w3-grey">3</div>
<div class = "w3-col m1 w3-center">4</div>
<div class = "w3-col m1 w3-center w3-grey">5</div>
<div class = "w3-col m1 w3-center">6</div>
<div class = "w3-col m1 w3-center w3-grey">7</div>
<div class = "w3-col m1 w3-center">8</div>
<div class = "w3-col m1 w3-center w3-grey">9</div>
<div class = "w3-col m1 w3-center">10</div>
<div class = "w3-col m1 w3-center w3-grey">11</div>
<div class = "w3-col m1 w3-center">12</div>
</div>
<div class = "w3-row">
<div class = "w3-col w3-container m4 l3 w3-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 = "w3-col w3-container s4 m8 l9">
<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>作者：terry，如若转载，请注明出处：https://www.web176.com/w3css/936.html
支付宝 
微信 