부트 스트랩 콜을 사용할 때 이미지 주위에 좌우 공백이 있습니다

Question

3 개의 이미지가있는 행이 있습니다.
왼쪽의 이미지에는 왼쪽에 공백이 있습니다.
이미지 오른쪽에는 오른쪽에 공백이 있습니다.

왼쪽 및 오른쪽면에 공간이 없도록 수정하려면 어떻게해야합니까? 더 나은 볼 수 그래서

배경 이미지에 주황색 :

아래 내 코드를 참조하십시오.

HTML :

<div class="container section"> 
    <div class="row"> 
    <div class="col-md-offset-1 col-md-10 featured"> 

     <div class="col-md-4 img-featured-1"> 
     <%= image_tag("featured-1.jpeg", class: "img-responsive") %> 
     </div> 
     <div class="col-md-4 img-featured-2"> 
     <%= image_tag("featured-2.jpeg", class: "img-responsive") %> 
     </div> 
     <div class="col-md-4 img-featured-3"> 
     <%= image_tag("featured-3.jpeg", class: "img-responsive") %> 
     </div> 

    </div> 
    </div> 
</div> 

CSS :

.featured { 
    background-color: orange; 
} 
.img-featured-1 { 
    width: 33.33333%; 
    float: left; 
} 
.img-featured-2 { 
    width: 33.33333%; 
} 
.img-featured-3 { 
    width: 33.33333%; 
    float: right; 
} 

See the image

Answer 1

셀에만 클래스는 측면에 약간의 마진을 추가하기 때문에 그것은 아마.

이 시도 :

.row { 
    margin: 0; 
} 

Answer 2

커플 것들을 제일 먼저 스타일 시트입니다. .img-featured-1이어야합니다 (점은이 스타일이 주어진 이름의 클래스에 적용됨을 정의합니다).

다음으로 해결되지 않으면 테마 스타일 시트를 확인하고 여백과 여백을 {margin : 0! important; 패딩 : 0! 중요; }

마지막으로 이미지 자체에 흰색/투명한 공간이 없어야합니다.

Answer 3

이 시도 :

.featured { 
    background-color: orange; 
} 

.nopadding { 
    padding:15px 0px;} 

+

<div class="container section"> 
    <div class="row"> 
    <div class="col-md-offset-1 col-md-10 nopadding"> 

     <div class="col-md-4 img-featured-1"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> 
     </div> 
     <div class="col-md-4 img-featured-2"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> 
     </div> 
     <div class="col-md-4 img-featured-3"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> 
     </div> 

    </div> 
    </div> 
</div>