Wie verstecke ich Tabs auf kleinen Bildschirmen?

Question

Ich habe ein AntD-Menü mit Beschriftungen und Symbolen. Dies ist die minimale Darstellung des Designs. Codesandbox

Jetzt möchte ich die Beschriftung ausblenden und das Symbol nur anzeigen, wenn im Menü Ellipsen angezeigt werden. Da ich mit CSS nicht sehr vertraut bin, habe ich mich gefragt, ob diese Funktionalität über antd erreicht werden kann.

Answer 1

您需要使用媒体查询，并在特定尺寸以下将标签设置为display none。

@media only screen and (max-width : 768px) {
    span.ant-menu-title-content {
    display: none;
    }
}

我个人建议您使用上面这个（它是在桌面和移动设备之间切换最常用的方法）

最后，请考虑使用justify-content: center来在移动设备上将菜单项居中显示 :)