如何在小螢幕上隱藏標籤？

Question

我有一個帶有標籤和圖標的 antd 選單。 這是設計的最小表示。 Codesandbox

現在我想要的是當選單開始顯示省略號時隱藏標籤，只顯示圖示。由於我對 CSS 不太熟悉，我想知道是否可以透過 antd 來實現這個功能。

Answer 1

您需要使用媒體查詢，並在特定尺寸以下將標籤設定為display none。

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

我個人建議您使用上面這個（它是在桌面和行動裝置之間切換最常用的方法）

最後，請考慮使用justify-content: center來在行動裝置上顯示選單項目 :)