css - Zurb Foundation 5 中从文本到图标的响应式菜单

标签 css twitter-bootstrap-3 zurb-foundation

我想将菜单从文本(桌面用大号)转换为图标(移动设备和平板电脑用中号和小号)。

有没有办法使用 Foundation 5 中的工具来做这样的事情?

附言。如果这个操作在 Bootstrap 中是可行的,我会进行切换:)

最佳答案

您可以使用 Foundation 的可见性类在不同的屏幕尺寸上显示/隐藏特定元素,例如:

<li>
  <a href="#" class="show-for-medium-up">Desktop Text Link</a>
  <a href="#" class="hide-for-medium-up">Mobile Icon Link</a>
</li>

有关基金会可见性等级的更多信息:http://foundation.zurb.com/docs/components/visibility.html

关于css - Zurb Foundation 5 中从文本到图标的响应式菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21834699/

相关文章:

html - Bootstrap 3 按钮组

html - 建立新的基于框架的元素并使用 LESS

html - 侧边栏旁边带有嵌套 100% 宽度标题的网格系统?

css - 为什么使用 Sass(不是 SCSS)?

css - bootstrap.min.css 覆盖了我的自定义 css 文件

javascript - react bootstrap 模态框在 react 16 中不起作用

jquery - 如何在 Require.js 中使用 Foundation 4 中的 Zeptos 和 Yeoman 中的 Grunt

javascript - ajax 加载内容上的 zurb 基础和事件

javascript - 使用 native JavaScript,如果对象具有特定的 CSS 类,则更改对象的标题属性

html - CSS内联内容后