響應式菜單：如何在xs屏幕上使按鈕文字消失而不使圖標消失？

Question

我正在使用Bootstrap構建網站，並且有一個垂直菜單，該菜單包含具有FontAwesome圖標和文本的按鈕。 對於XS屏幕，我不希望菜單完全折疊，但我希望文本消失並且按鈕縮小到圖標的大小（不應消失）。 我怎樣才能做到這一點？

Answer 1

這在Bootstrap 3中很好用，也很簡單，克里斯蒂娜（Christina）和cvrebert已經提到過。

只需在此小提琴中使用hidden-xs類和按鈕文本，以及下面的示例html ...

<button type="button" class="btn btn-default" aria-label="Left Align">
    <label class="hidden-xs">text</label>
    <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

我已將按鈕文本放置在標簽中，但您也可以輕松使用div，span等。

哦，我並沒有為字體真棒字形而煩惱，但這也同樣適用於它們。

Answer 2

遵循以下原則應該可以：

button *:not(i.fa) {
   font-size: 0;
}

現在，CSS中的*選擇器效率非常低下，因此可以用按鈕中經常出現的其他任何元素替換它（那里沒有很多有效的元素，因此並不難）。 基本上，CSS告訴您的頁面將作為按鈕的子元素的每個元素呈現為nil的font-size -除非它是FontAwesome圖標。

希望有幫助！