반응 부트 스트랩 캐 러셀 너비 동작

Question

캐 러셀을 페이지에 올바르게 표시하는 방법 또는 어떻게 할 것인지 "올바른 해결책"이 무엇인지 알고 싶습니다.

http://i.imgur.com/m8VYVRv.png

반응 - 부트 스트랩 구성 요소 웹 사이트

   <Well> 
       <Carousel> 
        <Carousel.Item> 
         <img width={900} height={500} alt="900x500" src="src/assets/construction-maison.jpg"/> 
         <Carousel.Caption> 
          <h3>First slide label</h3> 
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> 
         </Carousel.Caption> 
        </Carousel.Item> 
        <Carousel.Item> 
         <img width={900} height={500} alt="900x500" src="src/assets/chantier.jpg"/> 
         <Carousel.Caption> 
          <h3>Second slide label</h3> 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
         </Carousel.Caption> 
        </Carousel.Item> 
        <Carousel.Item> 
         <img width={900} height={500} alt="900x500" src="src/assets/Maison_en_construction_Demoli.jpg"/> 
         <Carousel.Caption> 
          <h3>Third slide label</h3> 
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> 
         </Carousel.Caption> 
        </Carousel.Item> 
       </Carousel> 
      </Well> 

http://i.imgur.com/BgqNfTE.png

img { 
    margin: auto; 
} 

이에서의 코드는 내가 함께 제공된 솔루션이지만, "OFF"의 종류를 느낀다.

그림의 크기와 일치하도록 회전 목마를 자동 여백으로 축소해야합니까? 원하는대로

Answer 1

당신은 당신의 이미지와 같은 고정 된 차원에 .carousel를 설정 한 다음 정렬 작업을 시도 할 수 있습니다 :

.carousel { 
    width:900px; 
    height:500px; 
    margin: auto; 
} 

편집을 주석에 따라 응답이 미디어 쿼리를 사용하여 보존하기 위해 (또한 부담

@media (max-width: 900px) { 
    .carousel { 
     width:auto; 
     height:auto; 
    } 
}