宽度旋转木马Bootstrap

Question

我有一个带自举的旋转木马，我希望图片标题的宽度为100％。我试过这个，但它不起作用.carousel-caption {   宽度：500px; }

<div id="myCarousel" class="carousel slide col-md-12" data-ride="carousel">
 <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>
   <li data-target="#myCarousel" data-slide-to="3"></li>
   <li data-target="#myCarousel" data-slide-to="4"></li>
  </ol>
 <!-- Wrapper for slides -->
 <div id="divres"  class="carousel-inner peopleCarouselImg" role="listbox">
  <div class="item active">
   <a href="resultado.php">
   <div>
    <img src="foto.png" alt="Chania">
     <div class="carousel-caption">
      <h1 class="img-rounded">EL MEJOR AUTO DEL MUNDO</h1>
     </div> 
   </div> 
  </a>     
</div>          
</div>
 <!-- Left and right controls -->
    <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">Anterior</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">Siguiente</span>
  </a>
</div>

我想要100％宽度

CSS

.carousel-caption {
  background-color: black;
}

Answer 1

您需要将宽度设置为100％以覆盖整个宽度。左侧边距用于向左移动旋转木马的左侧导航按钮占用。

.carousel-caption {
    background-color: black;
    width:100%;
    margin-left:-15%;
  }
@media screen and  (min-width:768px){
    .carousel-caption {
        background-color: black;
        width:100%;
        margin-left:-20%;
     }
}