スマートフォンでブートストラップカルーセルが欠けている

Question

私はいくつかのチュートリアルの後にブートストラップ付きのカルーセルを作りました。 ウィンドウのサイズを変更してもラップトップの画面でうまく動作しますが、スマートフォンで開くとカルーセルが見えなくなり、インジケータの矢印と画像の代替テキストが表示されます。

コードはかなり標準的ではないが、ここではそれが行く：

<div class="carousel-inner" role="listbox"> 
       <div class="item active"> 
        <img src="http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-wallpaper_042325903_304.jpg" alt="portfolio1"> 
        <div class="carousel-caption"> 
        <h1>Portfolio1</h1> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-wallpaper_042325903_304.jpg" alt="portfolio1"> 
        <div class="carousel-caption"> 
        <h1>Portfolio2</h1> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-wallpaper_042325903_304.jpg" alt="portfolio1"> 
        <div class="carousel-caption"> 
        <h1>Portfolio3</h1> 
        </div> 
       </div> 
       </div> 

チュートリアルは言及を忘れてしまったか、私はCSSにいくつかの作業を行う必要があります別のクラスはありますか？あなたが私を助けてくれることを願います。

非常に高く評価しました

Answer 1

jquery.minファイルのリンクを追加しましたか？ またはウェブサイトのリンクを投稿する

Answer 2

最新のブートストラップ4ベータ版を使用している場合は、「item」を「carousel-item」に置き換える必要があります。

がここにあなたのコードは、ここで例カルーセルと合併していますhttps://getbootstrap.com/docs/4.0/components/carousel/#with-indicators

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> 
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> 
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> 
    </ol> 
<div class="carousel-inner" role="listbox"> 
      <div class="carousel-item active"> 
       <img src="http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-wallpaper_042325903_304.jpg" alt="portfolio1"> 
       <div class="carousel-caption"> 
       <h1>Portfolio1</h1> 
       </div> 
      </div> 
      <div class="carousel-item"> 
       <img src="http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-wallpaper_042325903_304.jpg" alt="portfolio1"> 
       <div class="carousel-caption"> 
       <h1>Portfolio2</h1> 
       </div> 
      </div> 
      <div class="carousel-item"> 
       <img src="http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-wallpaper_042325903_304.jpg" alt="portfolio1"> 
       <div class="carousel-caption"> 
       <h1>Portfolio3</h1> 
       </div> 
      </div> 
      </div> 
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
    <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
    <span class="carousel-control-next-icon" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div> 

例あなたはカルーセルコードの残りの部分を追加でき