ブートストラップカルーセルの空白を削除するには？

Question

ブートストラップ・カルーセルに問題があります。エッジからエッジまで100％の幅にしたいのですが、左右の小さな空白を取り除くことはできません（マージン？）。私はすでにすべてを試してみました。ボーダー、マージン、パディング、別の公園内のアウトライン（画像、div、bootstrap.css） - 何も役に立たない。すべての手がかりは？ここで Here's what I'm talking about.

私のコードの一部です：

<div class="container" style="width: 100%;"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" style=""> 
    <!-- 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> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox" style="margin: 0px; padding: 0px; border: 0px; margin: none; "> 
     <div class="item active"> 
     <img src="img/back_1.JPG" alt="Chania" style="min-width:100%; margin: none; padding: none;"> 
     </div> 

     <div class="item"> 
     <img src="img/back_2.jpg" alt="Chania" style="width:100%;"> 
     </div> 

     <div class="item"> 
     <img src="img/back_3.jpg" alt="Flower" style="width:100%;" > 
     </div> 

     <div class="item"> 
     <img src="img/back_4.jpg" alt="Flower" style="width:100%;"> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

あなたのカルーセルの両側に空白がpadding-left: 15pxとpadding-right: 15pxを追加containerクラスから来ています。これを上書きすることができますが、メインの.container<div>要素からクラスを削除する方が理にかなっています。また

、あなたが実際にすべてで、この外側<div>コンテナを必要としないので、<div>要素は、デフォルトではと100%あることに注意してください。次の例に示すように、あなたは単に、<div id="myCarousel">であなたのカルーセルを開始することができます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" style=""> 
 
    <!-- 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> 
 
    <li data-target="#myCarousel" data-slide-to="3"></li> 
 
    </ol> 
 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox" style="margin: 0px; padding: 0px; border: 0px; margin: none; "> 
 
    <div class="item active"> 
 
     <img src="http://placehold.it/100" alt="Chania" style="min-width:100%; margin: none; padding: none;"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/100" alt="Chania" style="width:100%;"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/100" alt="Flower" style="width:100%;"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/100" alt="Flower" style="width:100%;"> 
 
    </div> 
 
    </div> 
 
</div>

は、この情報がお役に立てば幸い！ :)