ブートストラップ4の全幅カルーセル

Question

<div class="container-fluid" > 
    <div class="row"> 
     <section class="col-12"> 
     <div class=""> 
     <div class="row"> 
     <section class="col-sm-12"> 
    </div> 
    <div class="carousel slide" id="featured" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
     <li data-target="#featured" data-slide-to="0" class="active"></li> 
     <li data-target="#featured" data-slide-to="1"></li> 
     <li data-target="#featured" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner"> 
    <div class="carousel-item active"> 
    <img class="d-block img-fluid" src="_images/Slider_1.jpg" alt="slider1"> 
     </div> 
     <div class="carousel-item"> 
    <img class="d-block img-fluid" src="_images/Slider_2.jpg" alt="slider2"> 

    <div class="carousel-caption d-none d-md-block"> 


     <h3>Jadon Events</h3> 
     <p>We organize your events like you cannot even imagine</p> 
     </div> 
    </div> 
    <div class="carousel-item"> 
    <img class="d-block img-fluid" src="_images/Slider_3.jpg" alt="slider3"> 
    </div> 
    </div> 
    <a class="carousel-control-prev" href="#featured" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"> 
     <span class="sr-only">Previous</span> 
    </span></a> 
    <a class="carousel-control-next" href="#featured" role="button" data-slide="prev"><span class="carousel-control-next-icon" aria-hidden="true"> 
     <span class="sr-only">Next</span> 
    </span></a> 
</div> 
      </section> 
      </div> 
    </div> 

私はブートストラップでスライダを作る方法を考え出しましたが、今ではフルサイズのスライダがついています。 カルーセルを全幅にするにはどうしたらいいですか？コンテナクラスを削除しましたが、レスポンスに不向きな下部のスクロールがあります

Answer 1

次のコードを試してみてください。

<div class="carousel slide" id="featured" data-ride="carousel"> 
     <ol class="carousel-indicators"> 
      <li data-target="#featured" data-slide-to="0" class="active"></li> 
      <li data-target="#featured" data-slide-to="1"></li> 
      <li data-target="#featured" data-slide-to="2"></li> 
     </ol> 
     <div class="carousel-inner"> 
      <div class="carousel-item active"> 
       <img class="d-block img-fluid" src="http://placehold.it/2100x300" alt="slider1"> 
      </div> 
      <div class="carousel-item"> 
       <img class="d-block img-fluid" src="http://placehold.it/2100x300" alt="slider2"> 
       <div class="carousel-caption d-none d-md-block"> 
        <h3>Jadon Events</h3> 
        <p>We organize your events like you cannot even imagine</p> 
       </div> 
      </div> 
      <div class="carousel-item"> 
       <img class="d-block img-fluid" src="http://placehold.it/2100x300" alt="slider3"> 
      </div> 
     </div> 
     <a class="carousel-control-prev" href="#featured" role="button" data-slide="prev"> 
      <span class="carousel-control-prev-icon" aria-hidden="true"> 
           <span class="sr-only">Previous</span> 
      </span> 
     </a> 
     <a class="carousel-control-next" href="#featured" role="button" data-slide="prev"> 
      <span class="carousel-control-next-icon" aria-hidden="true"> 
           <span class="sr-only">Next</span> 
      </span> 
     </a> 
    </div>