부트 스트랩 캐 러셀에서 공백을 제거하는 방법은 무엇입니까?

Question

부트 스트랩 캐 러셀에 문제가 있습니다. 가장자리에서 가장자리까지 100 % 너비가되고 싶지만 왼쪽 및 오른쪽 (여백?)의 작은 공백을 제거 할 수는 없습니다. 저는 이미 모든 것을 시도했습니다 : 테두리, 여백, 패딩, 다른 공원의 윤곽선 (이미지, divs, bootstrap.css) - 아무 도움이되지 않습니다. 모든 단서?

<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 클래스에서오고있다 : 여기 Here's what I'm talking about.

내 코드의 일부입니다. 이것을 덮어 쓸 수 있지만, 기본 클래스 인 .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>

희망이 도움이! :)