将图标化链接添加到最小化的 twitter 引导导航栏答案

【问题标题】：Add iconified links to a minimised twitter bootstrap navbar将图标化链接添加到最小化的 twitter 引导导航栏
【发布时间】：2017-02-09 12:18:55
【问题描述】：

我正在使用来自 getbootstrap.com 的库存导航栏，我想将图标化链接放在 'collapsed' 导航栏上。我发现的唯一方法是像这样使用“navbar-brand”类属性......

<a class="navbar-brand" href="#link1">My Brand</a>
<a class="navbar-brand" href="#link2"><span class="glyphicon glyphicon-home" aria-hidden="true"></a>
<a class="navbar-brand" href="#link3"><span class="glyphicon glyphicon-user" aria-hidden="true"></a>

导致：

1) '非品牌链接是否有特定的类属性，因为我认为这种方法会对使用辅助技术的访问者产生影响。我尝试了“navbar-btn”和一个常规的“按钮”，但都没有垂直排列，或者看起来不错。

2) 我想在笔记本电脑上使用应用程序时隐藏这些图标化链接（如果可能）。 IE。在移动设备上使用图标，在桌面上使用菜单。

这将适用于功能有限的 CRUD 应用程序，并且下拉菜单在手机上很麻烦。

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 navbar

【解决方案1】：

回答 1

是的，引导程序具有“非品牌链接”的类属性，它是 class="navbar-text"。

答案 2

使用 bootstrap hidden-lg 在桌面应用程序上隐藏这些链接。

工作示例

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          </head>
          <body>

    <a class="navbar-brand" href="#link1">My Brand</a>
<a class="navbar-text hidden-lg hidden-md hidden-sm" href="#link2"><span class="glyphicon glyphicon-home" aria-hidden="true"></a>
<a class="navbar-text hidden-lg hidden-md hidden-sm" href="#link3"><span class="glyphicon glyphicon-user" aria-hidden="true"></a>
  </body>
  </html>

【讨论】：

感谢您的快速响应，我已将此标记为文档中显示的答案：bootstrapdocs.com/v3.0.3/docs/css)。但是它实际上对我不起作用（尝试了 firefox 和 chrome）。出于某种原因，当我使用“hidden-lg”（或“sm”或“md”）时，图标隐藏在桌面模式而不是折叠模式。 ** 请注意，它确实适用于“导航栏品牌”。
我更新了我的 sn-p 试试这个。它应该隐藏大型（台式机）、中型（平板电脑）和小型移动设备中的图标。但不会隐藏在 xs 设备中。
太好了，只要我定义了 2 个或更多“隐藏-*”标签，它就可以工作。非常感谢。