부트 스트랩의 회전식 플러그인의 배경색을 변경하는 방법은 무엇입니까?

Question

그래서 회전 목마의 배경색을 변경하는 데 문제가 있습니다. 내가 뭘하든 배경이 항상 흰색 인 것처럼 보입니다. 내 회전 목마에 https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h의 코드를 사용했습니다.

<div class="container" id="slides"> 
    <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> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
     <div class="item active"> 
     <img src="https://photos-3.dropbox.com/t/2/AADPmL6gjWHr1iYlah93suqa28cVuGlQ32aryhnqDI5JzA/12/611886439/jpeg/32x32/1/_/1/2/ConnectK%20carousel.jpg/ELbFkPkEGO0BIAIoAg/3oq_ZcBwruMHDZh7EsNU5B8UTbQE8n0KIgLWHmtklMQ?size=1280x960&size_mode=3" alt="Connect K project" style="width:100%;"> 
     </div> 

     <div class="item"> 
     <img src="https://photos-4.dropbox.com/t/2/AADn_i5Z_NwIjiBSH8pnZB7nPAYz-tmRqxlDtEMGsRfOww/12/611886439/jpeg/32x32/1/_/1/2/DigitalBraille.jpg/ELbFkPkEGO0BIAIoAg/TzOhuN9b1r5yKEmQ43BWI7NkmaaSwdLR0ikRW4DnaXc?size=1280x960&size_mode=3" alt="Chicago" style="width:100%;"> 
     </div> 

     <div class="item"> 
     <img src="https://photos-4.dropbox.com/t/2/AADJdh6q_qeKgWjhsL07M2NQH81JFg8Mx51O7G60oeRlGw/12/611886439/jpeg/32x32/1/_/1/2/MedAppJam.JPG/ELbFkPkEGPMBIAIoAg/aQ1lqISwGTPXaGi6jgbJoeMmDcQUtcKoIyWTrZADmPI?size=1280x960&size_mode=3" alt="MedAppJam project" style="width:100%;"> 
     </div> 
    </div> 

    <!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    </div> 
</div> 

CSS 스타일을 사용하여 배경을 변경하려고 시도했지만 어떤 이유로 작동하지 않습니다. 왜 그런지 모르겠습니다. 배경색을 변경하려고 추가 한 CSS는 다음과 같습니다.

#slides{ 
    color: grey; 
    background-color: grey !important; 
} 

.carousel{ 
    color: grey; 
    background-color: grey !important; 
} 
.carousel .item{ 
    color: grey; 
    background-color: grey; 
} 

https://codepen.io/chukt/pen/wqQqyL?editors=1100#0 이것이 내 전체 코드 링크입니다. 모든 이상한 색의 죄송합니다. 나는 그걸로 장난하고 있었다. 어쨌든, 나는 또한 하나의 change twitter bootstrap carousel background?과 같은 다른 질문을 체크 아웃하고 작동하지 않는 것 같습니다. 아무도 나에게 이것을 설명 할 수 있습니까?

Answer 1

현재 문제는 캐 러셀에 컨테이너 클래스가 적용되어 있으며 요소에 고정 폭이 추가되어 있다는 것입니다. 어느 쪽을보고있는 흰색은 실제로 신체의 배경색입니다.

전체 폭

<!-- Remove the container class from the slides div --> 
<div id="slides"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 

     <!-- Indicators --> 

     <!-- Wrapper for slides --> 

     <!-- Left and right controls --> 

    </div> 
</div> 

이미지 폭 (보여준다 회색 배경)

<!-- Wrap carousel-inner in a container div --> 
<div id="slides"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 

     <!-- Indicators --> 

     <!-- Wrapper for slides --> 
     <div class="container"> <!-- Added this line --> 
      <div class="carousel-inner"> 
       <div class="item active"> 
        <img src="http://lorempixel.com/1280/960" alt="Connect K project" style="width:100%;"> 
       </div> 

       <div class="item"> 
        <img src="http://lorempixel.com/1280/960" alt="Chicago" style="width:100%;"> 
       </div> 

       <div class="item"> 
        <img src="http://lorempixel.com/1280/960" alt="MedAppJam project" style="width:100%;"> 
       </div> 
      </div> 
     </div> <!-- Added this line --> 

     <!-- Left and right controls --> 

    </div> 
</div> 

:

이 주위에 두 가지 방법 (필자는 예를 들어 코드를 단축 한)가 있습니다

예를 들어 귀하의 코드를 포크했습니다. https://codepen.io/raptorkraine/pen/Gvaagm?editors=1100#0