響應式菜單：如何爲xS屏幕製作按鈕文字但不會消失圖標？

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

來源

2014-11-15 user3504783

您需要創建最佳效果的最小示例，然後發佈小提琴或bootply或bin。但是，請查看文檔中的響應式實用程序類，可以隱藏xs的文本。 – Christina

就像Christina說的那樣，在按鈕文字上使用'hidden-xs'。 – cvrebert

沿着這些線路的東西應該工作：

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

現在，*選擇在CSS的效率非常低，所以更換與任何其他元素在你的按鈕經常發生（有沒有一大堆那在那裏是有效的，所以它不應該是困難的）。基本上，CSS會告訴你的頁面呈現每個按鈕子元素的font-size爲零，除非它是一個FontAwesome圖標。

希望有幫助！

來源

2014-11-15 06:01:29

這對Bootstrap 3來說很好，而且已經被Christina和cvrebert提及。

只需使用hidden-xs類的按鈕文字與fiddle，和下面的例子中的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，跨度等

哦，我沒有打擾使用字體真棒字形，但這將工作與他們一樣容易。

來源

2014-11-15 11:27:41 Jeremy

響應式菜單：如何爲xS屏幕製作按鈕文字但不會消失圖標？

回答

相關問題