Liferay：如何折叠屏幕尺寸小于 768px（移动）而不是默认 979px（平板电脑）的停靠栏？

Question

我正在使用 Liferay 附带的默认停靠栏。当前，当屏幕宽度小于 979px 时 dockbar/navbar 会折叠。我希望 dockbar/navbar 在小于 768 像素的屏幕尺寸上折叠。我在 _variables.scss 文件中做了如下更改：

$navbarCollapseWidth: 768px !default;
$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1;

已将此文件复制到 diff 文件夹中。部署了代码。但是，停靠栏在小于 979 像素的屏幕尺寸上仍然会折叠。

我是否应该对任何其他文件进行更改？

Answer 1

是的，您必须覆盖停靠栏专用的核心 css 文件，即：

/portal-master/portal-web/docroot/html/themes/_styled/css/dockbar.css

查看第 755 行。

这是 liferay 前端开发人员的一个不愉快的选择。在某些情况下，例如那个，有一些特定的 css 文件不能仅通过自定义主题覆盖。

使用挂钩插件，您可以覆盖该文件。

再见

Answer 2

下面的代码包含在 custom.css 中，它对我有用。

@media (min-width:768px) and (max-width:979px)
{
    #_145_dockbar
    {
        display:none;
    }
    .aui #navigation
    {
        display:block;
    }
    .aui .nav-collapse, .aui .nav-collapse.collapse
    {
        overflow:visible;
    }
    .aui .nav-collapse .nav>li
    {
        float:left;
    }
    .aui .portlet-dockbar
    {
        width:auto;
    }
}

Liferay：如何折叠屏幕尺寸小于 768px（移动）而不是默认 979px（平板电脑）的停靠栏？

Liferay: How to collapse dockbar for screen size less than 768px(mobile) instead of default 979px(tablet)?

liferay

navbar

liferay-theme

responsiveness

liferay-ide