Question

我对编程很新，我遇到了一个问题，我的图像根本没有出现在我的bootstrap轮播上。这就是我到目前为止所做的：

<!DOCTYPE html>
 <html lang="en">
  <head>
<meta charset="=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
 <script 
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
 </script>
 <title>Not An Ostrich</title>
<style type="text/css">
@import url("Style.css");
</style>    
</head>
<body>

<div class="container">

 <div id="myCarousel" class="carousel slide" data-ride="carousel">
   <!-- Indicators -->
<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div>    
<!--<div class="fixed-bottom">-->       
<div class="carousel-inner">
    <div class="item active">
        <img src="img/lauragilpin.jpg" alt="" width="200px">
    </div>

    <div class="item">
        <img src="img/nao.png" alt="">
    </div>      
</div>  

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
 </a>
</div>

<div>
<div class="noapic">
        <img src="img/NaO_logo_blk.gif" alt="NAO" width="150px">
</div>

<!--</div>-->
<div class="asplogo">
<img src="img/ASP_RGB_BlackType_2LineHoriz.png" alt="asplogo" width="260px;">
</div>

</div>


</body>
</html>

任何人都可以解释我如何让它们显示出来吗？此外，原始文件是.tif文件，我认为这将是为什么，但我保存在我的计算机上的其他图像不是项目的一部分显示正常。

谢谢！

Answer 1

您尚未将div括在正确的位置，即ol。请按照以下代码。

<div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
        <!--<div class="fixed-bottom">-->
        <div class="carousel-inner">
            <div class="item active">
                <img src="https://dummyimage.com/1920x400/000/fff">
            </div>

            <div class="item">
                <img src="https://dummyimage.com/1920x400/000/fff">
            </div>
            <div class="item">
                <img src="https://dummyimage.com/1920x400/000/fff">
            </div>
        </div>

        <!-- Left and right controls -->
         <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
         </a>
         <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
         </a>
    </div>

我的图像不会显示在我的引导转盘上

1 个答案: