引導傳送帶圖像堆疊在彼此的頂部而與屏幕寬度無關

我正在嘗試製作一個引導程序傳送帶，該傳送帶可以自動在給定序列中的圖像之間切換。一切工作都是關於控件的（例如，在幻燈片位置指示器之間來回移動的箭頭），但是當我加載頁面時，圖像堆疊在彼此的頂部。有人可以指出這個問題嗎？引導傳送帶圖像堆疊在彼此的頂部而與屏幕寬度無關

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Appraisal</title> 
    <link rel="stylesheet" href="style.css"> 
    <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/css/mdb.min.css"> 
    </head> 

    <body> 
    <header> 
     <h1 class="animated slideInLeft">text goes here</h1> 
     <p>...</p> 
     <h4 class="animated slideInRight">portfolio</h4> 
    </header> 

    <div id="myCarousel" class="carousel slide"> 
     <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="carousel_inner"> 

     <div class="item active"> 
      <img src="./pics/space_1.jpg" alt="Space 1" class="img-responsive"> 
      <div class="carousel-caption"> 
      <h3>Appraisal 1</h3> 
      <p></p> 
      </div> 
     </div> 

     <div class="item"> 
      <img src="./pics/space_2.jpg" alt="Space 2" class="img-responsive"> 
      <div class="carousel-caption"> 
      <h3>Appraisal 2</h3> 
      <p></p> 
      </div> 
     </div> 

     <div class="item"> 
      <img src="./pics/space_3.jpg" alt="Space 2" class="img-responsive"> 
      <div class="carousel-caption"> 
      <h3>Appraisal 3</h3> 
      <p></p> 
      </div> 
     </div> 

     </div> 

     <a href="#myCarousel" class="carousel-control" data-slide="prev"> 
     <span class="icon-prev left"></span> 
     </a> 
     <a href="#myCarousel" class="carousel-control" data-slide="next"> 
     <span class="icon-next right"></span> 
     </a> 
    </div> 

    <div class="skills"> 

    </div> 

    <div class="certs"> 


    </div> 

    <footer> 
     <p>developed by: jefferson steelflex</p> 

    </footer> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/js/mdb.min.js"></script> 
    </body> 
</html>

來源

2017-07-04 cerrach

這只是一個錯字。只需將「carousel-inner」的幻燈片容器div中的類「carousel_inner」更改即可。

來源

2017-07-04 16:41:07

哇，謝謝你做的伎倆 – cerrach

引導傳送帶圖像堆疊在彼此的頂部而與屏幕寬度無關

回答

相關問題