OpenUI5：向 ToolPage 添加两边的边距答案

【问题标题】：OpenUI5: Add margins on both sides to ToolPageOpenUI5：向 ToolPage 添加两边的边距
【发布时间】：2018-11-27 17:35:36
【问题描述】：

我正在为我的应用程序使用 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);
    }
}

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

【问题讨论】：

避免宽度：1280px !important;因为您的最小宽度也是相同的大小。顺便说一句，您的问题不是很清楚，显示一些屏幕或要求。同样 margin-left:50% 不会给你两边的保证金你必须提供保证金：0 30%;像这样的

标签： css sapui5 margin

【解决方案1】：

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

您只需要使用标准 UI5 类，这将帮助您实现您的要求。

你可以通过Standard Margins 提供不同的margins 类。它还提供响应式类。

您也可以根据需要参考Standard Padding。

【讨论】：