완전히 반응하는 회전 목마 (부트 스트랩 v4-alpha)를 만들 수 없습니다.

Question

나는 이것을 기반으로 작동하는 회전 목마를 만들고 싶습니다. http://v4-alpha.getbootstrap.com/examples/carousel/ 문제는 내가 이미지를 업로드하고 작은 화면 크기로 크기를 조정할 때 이미지 아래에 여기와 같은 이전 이미지 홀더의 일부가 있다는 것입니다. https://postimg.org/image/ocul5jt2t/ 내가 원했던 것은 제 이미지가 제자리에 있고 더 이상 없습니다. 누군가 이걸로 나를 도울 수 있습니까?

<!-- Carousel 
================================================== --> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- 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> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
    <div class="carousel-item active"> 
     <img src="background1.jpg" alt="First slide"> 
     <div class="container"> 
     <div class="carousel-caption text-xs-left"> 
      <h1>Example headline.</h1> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> 
     </div> 
     </div> 
    </div> 
    <div class="carousel-item"> 
     <img src="background2.jpg" alt="Second slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Another example headline.</h1> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> 
     </div> 
     </div> 
    </div> 
    <div class="carousel-item"> 
     <img src="background3.jpg" alt="Third slide"> 
     <div class="container"> 
     <div class="carousel-caption text-xs-right"> 
      <h1>One more for good measure.</h1> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> 
     </div> 
     </div> 
    </div> 
    </div> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div><!-- /.carousel --> 

카루셀 HTML이 같은이며 또한 내가 내 프로젝트에 적응하지만, 앞서 언급 한 바와 같이 작은 크기로 크기를 조정할 때 문제가하고자하는 것이 의 CSS. 당신이 그 그림을 보게된다면 당신은 그것이 잘못된 것의 좋은 이상을 가질 수 있습니다.

body { 
padding-bottom: 3rem; 
color: #5a5a5a; 
} 



.carousel { 
margin-bottom: 4rem; 
} 

.carousel-caption { 
    z-index: 10; 
} 

.carousel-item { 
height: 32rem; 
background-color: #777; 
} 
.carousel-item > img { 
position: absolute; 
top: 0; 
left: 0; 
min-width: 100%; 
height: 32rem; 
} 

.carousel-indicators { 
top: 1.5rem; 
right: 1.5rem; 
bottom: auto; 
left: auto; 
width: 1rem; 
margin-left: 0; 
} 

.carousel-indicators > li { 
margin-bottom: .25rem; 
} 
@media (min-width: 40em) { 

.carousel-caption p { 
margin-bottom: 1.25rem; 
font-size: 1.25rem; 
line-height: 1.4; 
} 

.featurette-heading { 
font-size: 50px; 
} 
} 

@media (min-width: 62em) { 
.featurette-heading { 
margin-top: 7rem; 
} 
} 

Answer 1

이 현재 BS 4 알파 알려진 문제입니다 : https://github.com/twbs/bootstrap/pull/18258

하나의 옵션이 hidden-sm-down을 사용하여 수행 할 수있는 작은 뷰포트에 캡션을 숨기는 것입니다. 내가 찾은 또 다른 해결 방법은 이미지에 object-fit:cover을 사용하는 것이지만 이전 브라우저에서는 지원되지 않습니다.

.carousel-item > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    min-height: 32rem; 
    object-fit: cover; 
} 

http://www.codeply.com/go/EaMgFMhff2