Question

我有一个这样的基本页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> 
    <style>
        body { padding-top: 70px; }
    </style>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><span class="glyphicon glyphicon-envelope"></span></a></li>
          <li><a href="#"><span class="glyphicon glyphicon-off"></span></a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </nav>
    <div class="container">
        <div class="col-md-3">Sidebar</div>
        <div class="col-md-9">Content</div>
    </div>
</body>
</html>

在小屏幕上观看时，正如预期的那样，导航栏内容会折叠成带有下拉菜单的右对齐按钮。然而，有点尴尬的是，当他们折叠到小屏幕下拉菜单中时，我的信封图标和关闭图标看起来有点尴尬。然而，它们看起来很好，因为在全尺寸导航栏上没有文字的简单图标。有没有办法将文本应用于这些图标链接，以便它显示在折叠菜单中但不显示在完整的导航栏中？感谢。

Answer 1

例如：

<span class="icon-bar">
       <span class="visible-phone hidden-tablet hidden-desktop">myIconLabel</span>
</span>

班级可见电话隐藏平板电脑隐藏式桌面会在手机（折叠菜单）上显示，但不会在平板电脑或桌面上显示。

将文本添加到Bootstrap折叠的glyphicon链接

1 个答案: