问答详情
源自：-

为什么Bootstrap图片轮播的箭头不显示，其他都没什么问题


5635b13300015ea505000250.jpg

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<link href="css/rrny.css" rel="stylesheet"/>

 <link href="css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<!------------------------------------------------------------->

 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

      <ol class="carousel-indicators">

        <li data-target="carousel-example-generic" data-slide-to="0" class="active"></li>

        <li data-target="carousel-example-generic" data-slide-to="1"></li>

        <li data-target="carousel-example-generic" data-slide-to="2"></li>

       </ol>                           <!--   对应 圆圈-->

      <div class="carousel-inner" role="listbox">

        <div class="item active">

          <img src="images/rp1.jpg" alt="1 slide">

          <div class="carousel-caption">     

          </div>

        </div>

        <div class="item">

          <img src="images/rp2.jpg" alt="2 slide">

          <div class="carousel-caption">

          </div>

        </div>

       <div class="item">

          <img src="images/rp3.jpg" alt="3 slide">

          <div class="carousel-caption">

          </div>

        </div>    

      </div>

      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left"></span>

        <span class="sr-only">Previous</span>

      </a>                                    <!-- 对应轮播主键的按钮-->

      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right"></span>

        <span class="sr-only">Next</span>

      </a>

    </div>

<!------------------------------------------------------------->

<script src="js/jquery-1.11.1.min.js"></script>

<script src="js/bootstrap.min.js"></script> 

</body>

</html>

图片轮播效果正常，就是箭头不显示

提问者：会飞的柠檬 2015-11-01 14:33

个回答

  • 石糠
    2017-09-27 10:28:05

    我的出现箭头，但是箭头失效，是什么情况？

    0
  • qq_小橘子_3
    2017-05-25 10:31:15

    问题已解决 谢谢

    0
  • Richiechoo
    2016-11-29 13:34:02

    http://img.mukewang.com/583d129b00017ee808460237.jpg

    图为bootstrap.css的文件，文件中需要font文件夹下的图标，如下所示，所以把完整的bootstrap放在项目中

    http://img.mukewang.com/583d13170001770907290226.jpg

    2
  • uglyboy
    2016-07-29 16:07:02

    你没有把font文件放到你的目录下


    1
  • Daver2015
    2015-11-22 21:47:43

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/rrny.css" rel="stylesheet"/>
 <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!------------------------------------------------------------->
 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="carousel-example-generic" data-slide-to="1"></li>
        <li data-target="carousel-example-generic" data-slide-to="2"></li>
       </ol>                           <!--   对应 圆圈-->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="images/rp1.jpg" alt="1 slide">
          <div class="carousel-caption">     
          </div>
        </div>
        <div class="item">
          <img src="images/rp2.jpg" alt="2 slide">
          <div class="carousel-caption">
          </div>
        </div>
       <div class="item">
          <img src="images/rp3.jpg" alt="3 slide">
          <div class="carousel-caption">
          </div>
        </div>    
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span
            class="glyphicon glyphicon-chevron-left">&lsaquo;</span></a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next"><span
            class="glyphicon glyphicon-chevron-right">&rsaquo;</span></a>
    </div>
<!------------------------------------------------------------->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script> 
</body>
</html><!--刚才少了一个尖括号-->


    0
  • Daver2015
    2015-11-22 21:46:35

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/rrny.css" rel="stylesheet"/>
 <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!------------------------------------------------------------->
 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="carousel-example-generic" data-slide-to="1"></li>
        <li data-target="carousel-example-generic" data-slide-to="2"></li>
       </ol>                           <!--   对应 圆圈-->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="images/rp1.jpg" alt="1 slide">
          <div class="carousel-caption">     
          </div>
        </div>
        <div class="item">
          <img src="images/rp2.jpg" alt="2 slide">
          <div class="carousel-caption">
          </div>
        </div>
       <div class="item">
          <img src="images/rp3.jpg" alt="3 slide">
          <div class="carousel-caption">
          </div>
        </div>    
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span
            class="glyphicon glyphicon-chevron-left">&lsaquo;</span></a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next"><span
            class="glyphicon glyphicon-chevron-right">&rsaquo;</span></a>
    </div>
<!------------------------------------------------------------->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script> 
</body>
</html

    0
  • Hit_
    2015-11-21 14:33:37

    我的也是这样，我是在后台传数据到前台显示的时候没有箭头，但是直接静态界面有箭头。你解决了吗

    0