html - 响应式菜单 : how can I make button text but not icon disappear for xs screens?

Question

我正在使用 Bootstrap 构建一个站点，我有一个垂直菜单，其中包含带有 FontAwesome 图标和文本的按钮。对于 XS 屏幕，我不希望菜单完全折叠，但我希望文本消失并且按钮缩小到图标的大小(不应消失)。我怎样才能做到这一点？

Answer 1

这对于 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、span 等。

哦，我没有费心使用 Font Awesome 字形，但这对它们也同样容易。