Semantic-UI 响应式网格手动调整

简介

Semantic-UI 是一种流行的前端框架，提供了强大的网格系统来布局网页元素。使用 Semantic-UI 可以简化网页的开发过程，缩短开发时间。其中，响应式网格是 Semantic-UI 的一个非常重要的组成部分，可以根据不同设备的屏幕大小和方向自动调整布局。但有时候我们需要在网格中手动调整元素的宽度，这就需要使用 Semantic-UI 提供的一些特殊类。

使用方法

在 Semantic-UI 中，每个列（column）可以分成 16 份，我们可以通过以下类名进行手动调整：

1. one wide 占 1/16 的宽度
2. two wide 占 2/16 的宽度
3. three wide 占 3/16 的宽度
4. four wide 占 4/16 的宽度
5. five wide 占 5/16 的宽度
6. six wide 占 6/16 的宽度
7. seven wide 占 7/16 的宽度
8. eight wide 占 8/16 的宽度
9. nine wide 占 9/16 的宽度
10. ten wide 占 10/16 的宽度
11. eleven wide 占 11/16 的宽度
12. twelve wide 占 12/16 的宽度
13. thirteen wide 占 13/16 的宽度
14. fourteen wide 占 14/16 的宽度
15. fifteen wide 占 15/16 的宽度
16. sixteen wide 占整个列的宽度

可以与这些类名一起使用的还有以下几个：

1. computer 仅在电脑上生效
2. tablet 仅在平板电脑上生效
3. mobile 仅在手机上生效
4. vertically 垂直布局
5. horizontally 水平布局

示例代码

以下是一个网格布局的示例代码，其中第一个列占 1/3 的宽度，第二个列占 2/3 的宽度：

<div class="ui grid">
  <div class="four wide computer only column"></div>
  <div class="sixteen wide computer ten wide tablet fourteen wide mobile column"></div>
</div>