Bagaimana untuk menyembunyikan tab pada skrin kecil?

Question

Saya mempunyai menu antd dengan label dan ikon. Ini adalah perwakilan minimum reka bentuk. Codesandbox

Sekarang apa yang saya mahu ialah menyembunyikan label dan hanya menunjukkan ikon apabila menu mula menunjukkan elips. Oleh kerana saya tidak begitu biasa dengan CSS, saya tertanya-tanya sama ada fungsi ini boleh dicapai melalui antd.

Answer 1

Anda perlu menggunakan pertanyaan media dan tetapkan label untuk tidak memaparkan apa-apa di bawah saiz tertentu.

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

Saya secara peribadi mengesyorkan anda untuk menggunakan yang di atas (ia adalah cara paling biasa untuk bertukar antara desktop dan mudah alih)

Akhir sekali, pertimbangkan untuk menggunakan justify-content: item menu tengah ke tengah pada peranti mudah alih :)