📅 最后修改于: 2020-10-17 05:10:32 🧑 作者: Mango
W3.CSS具有几个特殊的类来创建响应式设计。
| Sr. No. | Class Name & Description |
|---|---|
| 1 |
w3-half Sets the container to occupy 1/2nd of the window on medium or large screen devices. If a screen is smaller than 601 pixels, then it resizes the container to 100%. |
| 2 |
w3-third Sets the container to occupy 1/3rd of the window on medium or large screen devices. If a screen is smaller than 601 pixels, then it resizes the container to 100%. |
| 3 |
w3-quarter Sets the container to occupy 1/4th of the window on medium or large screen devices. If a screen is smaller than 601 pixels, then it resizes the container to 100%. |
| 4 |
w3-col Specifies a column in a 12 column grid. |
| 5 |
w3-row Specifies a padding-less container to be used for responsive classes. This class is mandatory for responsive classes to be fully responsive. |
The W3.CSS Containers
Mobile First Design Demo
Resize the window to see the effect!
w3-half
Sets the container to occupy 1/2nd of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.
w3-half
w3-third
Sets the container to occupy 1/3rd of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.
w3-third
w3-quarter
Sets the container to occupy 1/4th of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.
w3-quarter
验证结果。