W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 响应流式栅格系统



响应式栅格

W3.CSS 支持12列的响应流式栅格系统。

调整页面大小看效果!

1
2
3
4
5
6
7
8
9
10
11
12

This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.

This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.

1
2
3
4
5
6
7
8
9
10
11
12

Example

<div class="w3-row">
  <div class="w3-col m4 l3">
    <p>12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
  </div>
  <div class="w3-col m8 l9">
    <p>12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.</p>
  </div>
</div>
尝试一下 »

响应行

W3.CSS的栅格系统是响应式的,列将根据屏幕尺寸自动重新排列:在大屏幕上,可能会看起来内容组织在三列,但在小屏幕上,内容将堆放在彼此之上。

列必须在 row 内才具有响应式。

描述
w3-row 为响应列定义无填充容器。
w3-row-padding 定义一个用于响应列的填充容器。
w3-col 定义具有子类的列

w3-col 有以下子类:

小屏幕列(典型智能手机):

描述
s1 定义小屏幕的12列中的1列(宽度:08.33%)
s2 定义小屏幕的12列中的2列(宽度:16.66%)
s3 定义小屏幕的12列中的3列(宽度:25.00%)
s4 定义小屏幕的12列中的4列(宽度:33.33%)
s5-s11  
s12 定义12列中的12列(宽度:100%)。

中等屏幕列(典型平板电脑):

描述
m1 定义中屏幕的12列中的1列(宽度:08.33%)
m2 定义中屏幕的12列中的2列(宽度:16.66%)
m3 定义中屏幕的12列中的3列(宽度:25.00%)
m4 定义中屏幕的12列中的4列(宽度:33.33%)
m5-m11   
m12 定义12列中的12列(宽度:100%)。

大屏幕列(典型笔记本电脑):

描述
l1 定义大屏幕的12列中的1列(宽度:08.33%)
l2 定义大屏幕的12列中的2列(宽度:16.66%)
l3 定义大屏幕的12列中的3列(宽度:25.00%)
l4 定义大屏幕的12列中的4列(宽度:33.33%)
l5-l11   
l12 定义12列中的12列(宽度:100%)。

上面的类可以组合起来创建动态和更加灵活的布局。

每个类别都会放大,所以如果你想为小,中,大屏幕设置相同的宽度,你只需要指定一个 small 类。 而如果您想要在中等和大屏幕上使用相同的宽度,则只需要指定中等类别。

但是,如果仅使用中等和/或大类,则在小屏幕上宽度总是变为100%。

注意: 每行的列数应该总是加起来是12(6 + 6,3 + 3 + 6,9 + 3等)!


两个等列

所有屏幕尺寸上的两个等宽列(50%/50%):

s6

s6

Example

<div class="w3-row">
  <div class="w3-col s6 w3-green w3-center"><p>s6</p></div>
  <div class="w3-col s6 w3-dark-grey w3-center"><p>s6</p></div>
</div>
尝试一下 »

两个不等列

所有屏幕尺寸上两列不等宽(25%/75%):

s3

s9

Example

<div class="w3-row">
  <div class="w3-col s3 w3-green w3-center"><p>s6</p></div>
  <div class="w3-col s9 w3-dark-grey w3-center"><p>s6</p></div>
</div>
尝试一下 »


三个等宽列

所有屏幕尺寸的三个等宽列(33.3%/33.3%/33.3%):

s4

s4

s4

Example

<div class="w3-row">
  <div class="w3-col s4 w3-green w3-center"><p>s4</p></div>
  <div class="w3-col s4 w3-dark-grey w3-center"><p>s4</p></div>
  <div class="w3-col s4 w3-red w3-center"><p>s4</p></div>
</div>
尝试一下 »

三个不等宽列

平板电脑,笔记本电脑和桌面上的三个不同宽度的列(25%/50%/25%)。在手机上,列将自动堆叠(100%宽):

m3

m6

m3

Example

<div class="w3-row">
  <div class="w3-col m3 w3-green w3-center"><p>m3</p></div>
  <div class="w3-col m6 w3-dark-grey w3-center"><p>m6</p></div>
  <div class="w3-col m3 w3-red w3-center"><p>m3</p></div>
</div>
尝试一下 »

Note: This example is the same as using w3-quarter (m3), w3-half (m6), w3-quarter (m3), which you learned in the W3.CSS Responsive chapter.


六列

平板电脑,笔记本电脑和桌面上有六个等宽列(每个16%)。在手机上,列将自动堆叠(100%宽):

m2

m2

m2

m2

m2

m2

Example

<div class="w3-row">
  <div class="w3-col m2 w3-green w3-center"><p>m2</p></div>
  <div class="w3-col m2 w3-red w3-center"><p>m2</p></div>
  <div class="w3-col m2 w3-blue w3-center"><p>m2</p></div>
  <div class="w3-col m2 w3-dark-grey w3-center"><p>m2</p></div>
  <div class="w3-col m2 w3-black w3-center"><p>m2</p></div>
  <div class="w3-col m2 w3-purple w3-center"><p>m2</p></div>
</div>
尝试一下 »

混合:手机和笔记本电脑

您可以组合类来创建动态和灵活的布局。此实例将生成一个两列布局,在大屏幕上分割为 83.34%/16.66%(l8,l4),在小屏幕上分割为 50%/50%(s6,s6)

l8 s6

l4 s6

Example

<div class="w3-row">
  <div class="w3-col l8 s6 w3-pink w3-center"><p>l8 s6</p></div>
  <div class="w3-col l4 s6 w3-dark-grey w3-center"><p>l4 s6</p></div>
</div>
尝试一下 »

混合:手机,平板电脑和笔记本电脑

该实例将生成三列布局,在大屏幕上分割为25%/58.34%/16.66%(l3,l7,l2),在中等屏幕上分割为50%/25%/25%(m6,m3,m3),在小屏幕上分割为33.3%/33.3%/33.3%(s4,s4,s4):

l3 m6 s4

l7 m3 s4

l2 m3 s4

Example

<div class="w3-row">
  <div class="w3-col l9 m6 s4 w3-green w3-center"><p>l8 s6</p></div>
  <div class="w3-col l2 m3 s4 w3-dark-grey w3-center"><p>l4 s6</p></div>
  <div class="w3-col l1 m3 s4 w3-red w3-center"><p>l4 s6</p></div>
</div>
尝试一下 »

w3-row 与 w3-row-padding 之间的差别

w3-row 类定义了一个无填充容器,而 w3-row-padding 类向每列添加了一个8px左右的填充:

w3-row:

w3-row-padding:

Example

<div class="w3-row">
  <div class="w3-col s4"><img src="img_lights.jpg"></div>
  <div class="w3-col s4"><img src="img_nature.jpg"></div>
  <div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div>

<div class="w3-row-padding">
  <div class="w3-col s4"><img src="img_lights.jpg"></div>
  <div class="w3-col s4"><img src="img_nature.jpg"></div>
  <div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div>
尝试一下 »

使用百分比

20%

60%

20%


45%

55%


15%

35%

10%

30%

10%

Example

<div class="w3-row">
    <div class="w3-col w3-container w3-green" style="width:20%"><p>20%</p></div>
    <div class="w3-col w3-container w3-blue" style="width:60%"><p>60%</p></div>
    <div class="w3-col w3-container w3-red" style="width:20%"><p>20%</p></div>
</div>
尝试一下 »

使用 w3-rest

150px

rest


75px

rest


100px

100px

rest


quarter

80px

rest

quarter


quarter

quarter

35%

rest

Example using rest

<div class="w3-row">
    <div class="w3-col" style="width:150px"><p>150px</p></div>
    <div class="w3-rest"><p>rest</p></div>
</div>
尝试一下 »