w3css 在线编辑器 | w3css代码测试

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.cainiaomax.com/w3css/4/w3.css">
<body>

<h3>移动优先的流体网格</h3>
<h5>尝试调整窗口大小</h5>
<br>
<div class="w3-row">
<div class="w3-col m4 l3 w3-grey">
<h5>导航</h5>
12 列 (s12)<br>在小屏幕上<br><br>
4 列 (m4)<br> 在中型屏幕上<br><br>
3 列 (l3)<br>在大屏幕上<br><br>
</div>
<div class="w3-col m8 l9">
<h5>内容</h5>
12 列 (s12)<br>在小屏幕上<br><br>
8 列 (m8)<br> 在中型屏幕上<br><br>
9 列 (l9)<br>在大屏幕上<br><br>
</div>
</div>
<br>
<div class="w3-row">
  <div class="w3-col m1 w3-grey"><p>1</p></div>
  <div class="w3-col m1"><p>2</p></div>
  <div class="w3-col m1 w3-grey"><p>3</p></div>
  <div class="w3-col m1"><p>4</p></div>
  <div class="w3-col m1 w3-grey"><p>5</p></div>
  <div class="w3-col m1"><p>6</p></div>
  <div class="w3-col m1 w3-grey"><p>7</p></div>
  <div class="w3-col m1"><p>8</p></div>
  <div class="w3-col m1 w3-grey"><p>9</p></div>
  <div class="w3-col m1"><p>10</p></div>
  <div class="w3-col m1 w3-grey"><p>11</p></div>
  <div class="w3-col m1"><p>12</p></div>
</div>
<br>
<div class="w3-row">
  <div class="w3-col w3-grey"><p>默认</p></div>
</div>
<br>
<div class="w3-row">
  <div class="w3-col m6 w3-grey"><p>m6</p></div>
  <div class="w3-col m6"><p>m6</p></div>
</div>
<br>
<div class="w3-row">
  <div class="w3-col m4 w3-grey"><p>m4</p></div>
  <div class="w3-col m4"><p>m4</p></div>
  <div class="w3-col m4 w3-grey"><p>m4</p></div>
</div>
<br>
<div class="w3-row">
  <div class="w3-col m3 w3-grey"><p>m3</p></div>
  <div class="w3-col m3"><p>m3</p></div>
  <div class="w3-col m3 w3-grey"><p>m3</p></div>
  <div class="w3-col m3"><p>m3</p></div>
</div>
<br>     
<div class="w3-row">
  <div class="w3-col m2 w3-grey"><p>m2</p></div>
  <div class="w3-col m2"><p>m2</p></div>
  <div class="w3-col m2 w3-grey"><p>m2</p></div>
  <div class="w3-col m2"><p>m2</p></div>
  <div class="w3-col m2 w3-grey"><p>m2</p></div>
  <div class="w3-col m2"><p>m2</p></div>
</div>

</body>
</html>

报个问题: