Question

目前我有一个由4个图标和一个搜索输入表单组成的bootstrap导航。当视图进入移动设备时，我希望仅为导航器设置汉堡包菜单图标，并且当打开时仅打开文本（也就是删除图标并用文本替换它们）。这可能吗？我似乎无法使用崩溃让它工作。

谢谢，下面的代码。

如果您需要更多信息/代码，请告诉我

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Explore Canterbury</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">

    <script src="js/scripts/instafeed.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      var feed = new Instafeed ({
        get: 'tagged',
        tagName: 'Canterburycity',
        limit: 10,
        clientId: 'ee3edb1715294419a0142fedbf019185',
        accessToken: '34779483.1677ed0.ffc3e6b1fb824225ac992d99044d7169',
        useHttp: true
      });
      feed.run();
    </script>

  </head>

  <body>

    <div class="container">

      <!-- Static navbar -->
      <nav class="navbar navbar-default" style="z-index:2;">
        <div class="container-fluid">
          <div id="navbar">
            <ul class="nav navbar-nav">
            <li type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="LocIcon"></span></li>
            <ul class="dropdown-menu">
              <li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Museums and Galleries</a></li>
              <li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox"/>&nbsp;Landmarks</a></li>
              <li><a href="#" class="small" data-value="option4" tabIndex="-1"><input type="checkbox"/>&nbsp;Shopping</a></li>
              <li><a href="#" class="small" data-value="option5" tabIndex="-1"><input type="checkbox"/>&nbsp;Churches</a></li>
              <li><a href="#" class="small" data-value="option6" tabIndex="-1"><input type="checkbox"/>&nbsp;Tours and Guides</a></li>
            </ul>
            <li><span class="photosIcon nav-toggle-2"></span></li>
            <li><span class="infoIcon nav-toggle-3"></span></li>
            <li><span class="searchIcon"></span></li>
            </ul>
          </div><!--/.nav-collapse -->

          <form class="navbar-form" role="search">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            </div>
          </form>

        </div><!--/.container-fluid -->
      </nav>

    </div> <!-- /container -->

使bootstrap导航响应并将图标转换为文本

0 个答案: