이러한 이미지를 부트 스트랩 3 그리드 시스템 내부에 어떻게 배치합니까?

Question

내가 자동으로 너비를 설정 했는데도 내가 한 순간의 이미지가 자동 크기 조정이 아니기 때문에 부트 스트랩 3 RC2를 사용하여 CSS가있는이 세 이미지 사이에 공백을 넣을 수있는 가장 좋은 방법이 있는지 궁금합니다. 내 #picture id 태그. 이미지를 인라인하고 크기를 조정할 수 있기를 바랍니다.

여기 내 마크 업입니다 :

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-4"> 
      <img src="http://placehold.it/350x250" id="picture" /> 
     </div> 
     <div class="col-lg-4"> 
      <img src="http://placehold.it/350x250" id="picture" /> 
     </div> 
     <div class="col-lg-4"> 
      <img src="http://placehold.it/350x250" id="picture" /> 
     </div> 
    </div> 
</div> 

CSS :

.container { 
    max-width:1000px; 
    background-color:white; 
} 
body { 
    background-color:cyan 
} 
#picture { 
    width:auto; 
    /*margin-left:10px; */ 
    /*margin-right:10px; */ 
} 
.col-lg-4 { 
    margin-left:10px; 
    margin-right:10px; 
} 

내 Fiddle 명확한보기를 확인합니다. 이것을 처리하는 더 좋은 방법이 있습니까?

Answer 1

.col-lg-4에 대한 자신의 CSS 제거 :이 여백이 부트 스트랩 CSS를 망칠 수 있습니다. 그 옆에있는이 열은 화면 너비가 1200 픽셀 이상인 경우에만 표시됩니다.

div에 다음 클래스를 추가하십시오. .col-xs-4.col-sm-4 및 .col-md-4 이미지에 class="img-responsive" 속성을 지정하십시오.

원하는대로 작동합니다.

Answer 2

나는 당신의 질문을 이해한다면, 그림 사이에 일정한 공간을두고 수평선으로이 그림들을 보여주고 싶습니까? 모든

첫째 줄의 DIV 년대는 컨테이너 및 행 (예를 들어, 100 %) 다음 div의이 사진을 보유하기위한 폭을 지정하려면 다음

.col-lg-4 { 
    display: inline-block; 
} 

시도를 변경 얻을 수 있습니다. 이게 당신을 도와줬으면 좋겠습니까?

Answer 3

언급 한 바와 같이 웰 웰크는 CSS를 삭제하십시오. 다음 HTML 만 필요합니다. "col-xs-4"및 "img-responsive"클래스를 주목하십시오. 모든 화면 크기에서 3 열을 사용하려는 경우 col-sm-4, col-md-4, col-lg-4가 필요하지 않습니다.

<div class="container"> 
<div class="row"> 
    <div class="col-xs-4"> 
     <img src="http://placehold.it/350x250" id="picture1" class="img-responsive" /> 
    </div> 
    <div class="col-xs-4"> 
     <img src="http://placehold.it/350x250" id="picture2" class="img-responsive" /> 
    </div> 
    <div class="col-xs-4"> 
     <img src="http://placehold.it/350x250" id="picture3" class="img-responsive" /> 
    </div> 
</div>