时间戳

首页 > 解决方案 > OpenUI5：向 ToolPage 添加两边的边距

css - OpenUI5：向 ToolPage 添加两边的边距

问题描述

我正在为我的应用程序使用 OpenUI5 ToolPage。在所有演示中，这ToolPage占用了 100% 的可用宽度，但我想使用媒体查询设置左右边距。

<mvc:View
    height="100%"
    controllerName="internal_app.controller.App"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:tnt="sap.tnt">

<tnt:ToolPage id="app" class="internalAppToolPage">
    <tnt:header>
        <tnt:ToolHeader>
######

我的观点是这样的。我添加了类internalAppToolPage并ToolPage设置了CSS

@media (min-width: 1280px) {
    .internalAppToolPage {
        width: 1280px !important;
        margin-left: 50%;
        background-color: rgba(255,255,255,0.3);
    }
}

但这会导致整个页面向右移动。我究竟做错了什么。抱歉，如果这也转储了，但我看不到我的错误。

标签： csssapui5margin

解决方案

如果您只关心两边的边距，则无需使用媒体查询。由于 UI5sap.m库提供响应式布局。

只是你需要使用标准的 UI5 类来帮助你实现你的要求。

您可以通过提供不同保证金等级的标准保证金。它还提供响应式类。

您也可以根据您的要求参考标准填充。

推荐阅读