ブートストラップのカルーセル画像は、画面の幅に関係なく重ねて表示されます。

私は、与えられたシーケンスの画像を自動的に切り替えるブートストラップカルーセルを作ろうとしています。コントロール（つまり、画像間を行き来するための矢印&スライドポジションインジケータ）のすべてが動作していますが、ページをロードすると画像が重ねて表示されます。誰かがこの問題を指摘できますか？ブートストラップのカルーセル画像は、画面の幅に関係なく重ねて表示されます。

<!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

これは単なる誤植です。スライドコンテナdivの "carousel-inner"のクラス "carousel_inner"を変更してください。

出典

2017-07-04 16:41:07

トリックをした – cerrach

ブートストラップのカルーセル画像は、画面の幅に関係なく重ねて表示されます。

答えて

関連する問題