个人中心
gpt4 book ai didi

jquery - icon-arrow-right 现在从 jsfiddle 的示例中出现在我的元素中

转载 作者：行者123 更新时间：2023-11-28 03:47:49 25 4
gpt4 key购买 nike

我从 jsfiddle 复制了一个 Bootstrap 选项卡控件示例元素

bootstrap tab control sample with dropdown menus ---

作为 .htm 元素到我的本地工作站(我在这里没有使用 visual studio——运行 win7 IE 11)。我添加(下载)了此示例元素中引用的所有引用的 .css/.js 文件。示例元素正在我的工作站上运行。我什至在第二个菜单(选项卡)项上得到了向下的插入符号。但实际示例中的子菜单显示一个 icon-arrow-right(用于附加子菜单)。这个 icon-arrow-right 没有出现在我的工作站上。

我使用 VS2015 尝试了另一个来自 jsfiddle 的示例元素，它使用了 glyphicons。我得到了这个工作，所以我将字体文件夹从 VS 元素复制到我的 html 元素文件夹，并尝试在 htm 元素中使用 glyphicon-arrow-right 并引用 bootstrap.min.css 但仍然没有箭头。我根据其他关于同一问题的帖子尝试了各种方法——但没有成功。

如何让 icon-arrow-right 显示在我的 win7 IE11 示例元素中？

这是我正在使用的 html 代码

html>
<head>


  <script type="text/javascript" src="jquery-1.7.1.js"></script>
  <link rel="stylesheet" type="text/css" href="normalize.css">  
  <!--<script type="text/javascript" src="bootstrap-2.0.2.js"></script>-->
<script type="text/javascript" src="bootstrap.js"></script>
  <link rel="stylesheet" type="text/css" href="result-light.css">     
  <link rel="stylesheet" type="text/css" href="bootstrap-combined.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<!--<link rel="stylesheet" type="text/css" href="bootstrap-glyphicons.css">-->

<style type="text/css">
    body {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    .sidebar-nav {
        padding: 9px 0;
    }

    .dropdown-menu .sub-menu {
        left: 100%;
        position: absolute;
        top: 0;
        visibility: hidden;
        margin-top: -1px;
    }

    .dropdown-menu li:hover .sub-menu {
        visibility: visible;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
    }

    .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
        margin-top: 0;
    }

    .navbar .sub-menu:before {
        border-bottom: 7px solid transparent;
        border-left: none;
        border-right: 7px solid rgba(0, 0, 0, 0.2);
        border-top: 7px solid transparent;
        left: -7px;
        top: 10px;
    }

    .navbar .sub-menu:after {
        border-top: 6px solid transparent;
        border-left: none;
        border-right: 6px solid #fff;
        border-bottom: 6px solid transparent;
        left: 10px;
        top: 11px;
        left: -6px;
    }

    .glyphicon-nonescaped.glyphicon-arrow-right:before { 
        content: "\e092";
    }

  </style>

  <title></title>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){

});//]]> 

</script>


</head>

<body>
  <div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
      <div class="container-fluid">
        <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </a>
    <a href="#" class="brand">Project name</a>
    <div class="nav-collapse">
      <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li>
                <!--<a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>-->
    <a href="#">2-level Dropdown <i class="glyphicon glyphicon-arrow-right glyphicon-nonescaped"></i></a>
                    <ul class="dropdown-menu sub-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li class="nav-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="nav-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <form action="" class="navbar-search pull-left">
            <input type="text" placeholder="Search" class="search-query span2">
          </form>
          <ul class="nav pull-right">
            <li><a href="#">Link</a></li>
            <li class="divider-vertical"></li>
            <li class="dropdown">
              <a class="#" href="#">Menu</a>
            </li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div>
  </div>
</div>

<hr>

<ul class="nav nav-pills">
 <li class="active"><a href="#">Regular link</a></li>
 <li class="dropdown">
  <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
  <ul class="dropdown-menu" id="menu1">
    <li>
    <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
    <ul class="dropdown-menu sub-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li class="nav-header">Nav header</li>
        <li><a href="#">Separated link</a></li>
        <li><a href="#">One more separated link</a></li>
    </ul>
    </li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</li>
<li class="dropdown">
 <a href="#">Menu</a>
</li>
<li class="dropdown">
<a href="#">Menu</a>
</li>
</ul>


<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
  height: document.body.getBoundingClientRect().height,
  slug: "2Smgv"
}], "*")
}
</script>

</body>

</html>

最佳答案

当我打开调试器时，我看到这行 CSS 设置了该图像的 URL:

.btn-link[disabled]:hover,.btn-link[disabled]:focus{color:#333333;text-decoration:none;}
[class^="icon-"],[class*=" icon-"]{display:inline-block;width:14px;height:14px;*margin-right:.3em;line-height:14px;vertical-align:text-top;background-image:url("../img/glyphicons-halflings.png");background-position:14px 14px;background-repeat:no-repeat;margin-top:1px;}

这是来自 bootstrap-combined.min.css 第 381 行

我认为您需要将 url 更新为:

http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/img/glyphicons-halflings.png或与该给定符号相关的任何路径。似乎只显示了图像 URL 的一部分。

关于jquery - icon-arrow-right 现在从 jsfiddle 的示例中出现在我的元素中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43878211/

25 4 0
文章推荐： java - org.xml.sax.SAXParseException : Reference is not allowed in prolog
文章推荐： c++ - 将用户输入传递给带有 char* 参数的函数
文章推荐： javascript - Angular4 中的图像旋转
文章推荐： c++ - 在动态链接库 kernel32.dll 中找不到过程入口点 RegCloseKey
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com