问将文本添加到Bootstrap折叠的图标链接中
EN

Stack Overflow用户

提问于 2013-12-04 22:16:26

回答 1查看 1.9K关注 0票数 1

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

<!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>

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

css

twitter-bootstrap

twitter-bootstrap-3

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-12-04 22:23:26

例如：

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

可视电话隐藏平板电脑隐藏桌面将显示在手机上(折叠菜单)，但不显示在平板电脑或桌面上。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20387258

复制

相似问题

问将文本添加到Bootstrap折叠的图标链接中
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将文本添加到Bootstrap折叠的图标链接中EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将文本添加到Bootstrap折叠的图标链接中
EN