響應式網格佈局是一種使用響應式網格的表單。 根據可用空間，組呈現在一列或多列中，標籤呈現在與欄位相同的行或欄位上方。 此行為可能會受到此佈局控制元件的屬性的影響。

透過使用響應式網格佈局，表單提供了基於 12 列網格的響應式佈局。 有兩個斷點，導致三種支援的大小：L、M 和 S。這些斷點不是頁面的 L、M 和 S 斷點。 與響應螢幕寬度的頁面斷點相比，響應式網格佈局的斷點響應表單的寬度。

注意：出於向下相容的原因，表單和簡單表單的預設表單佈局控制元件是列布局，而不是響應式網格佈局。 因此，需要使用 layout 屬性手動將響應式網格佈局分配給每個表單或簡單表單。

已知一個表單寬度，如果知道它落在哪種型別的寬度之內呢？可以從下圖這張表格找到答案：

![](https://img-blog.csdnimg.cn/img_convert/5781d0b75cfa52e5dd189806eec6db5f.png)

- 表單寬度 <= 600: S
- 表單寬度 > 600 並且 <= 1024: M
- 表單寬度 > 1024 並且 <= 1440: L
- 表單寬度 > 1440: XL

尺寸 S 達到 600 畫素。 這意味著表單的寬度一旦達到 601 px，就會從 S 變為 M，因為 breakpointM 的預設值是 600。breakpointM 的值是較小尺寸的第一個值。

大小 L 和 M 之間的屬性 breakpointL 以相同的方式工作：大小 M 從 601 畫素到達 1024 畫素。 這意味著表單的寬度一旦達到 1025 px，就會從 M 變為 L，因為 breakpointL 的預設值為 1024。

此外，大小 L 和 XL 之間的屬性 breakpointXL 的工作方式與以前相同：大小 L 從 1025 畫素到 1440 畫素。 這意味著表單的寬度一旦達到 1441 px，就會從 L 變為 XL，因為 breakpointXL 的預設值為 1440。

一般來說，如果頁面寬度更改為更小的尺寸，則通常在頁面寬度到達其在該尺寸下的斷點之前達到下一個較小斷點處的表單寬度。 例如，在頁面寬度到達從 M 到 S 的斷點之前，表單的寬度到達斷點 M 到 S。這是由於放置表單的容器的填充造成的。

下面是一個示意圖：
![](https://img-blog.csdnimg.cn/img_convert/3938a946c2dd033e6cb86e98b4ac0a0b.png)

SAP UI5 Form 表單的 Responsive Grid Layout 佈局中的 breakpoint

相關文章