2017-05-06 4 views
-1

부트 스트랩이있는 회전식 캐 러셀이 있습니다. 그림 제목에 너비 100 %를 지정하고 싶습니다. 나는 이것을 시도했지만 움직이지 않는다. 회전식 캡션 { width : 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 % 폭

enter image description here

CSS의 원하는 당신은 전체 width.The 마진 왼쪽을 충당하기 위해 100 % 너비를 설정해야

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

스크린 샷 대신 코드를 게시하십시오. –

+0

@AnuragDaolagajao ok. –

답변

0

회전 목마의 왼쪽 탐색 버튼이 차지하고있는 왼쪽을 향해 이동하는 데 사용됩니다.

.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%; 
    } 
} 
+0

그것은 작동합니다 :)하지만 -20 % 감사합니다 –

+0

. carrousel-caption { background-color : black; 너비 : 100 %; margin-left : -20 %; } –

+0

도움이 된 것을 기쁘게 생각합니다. – Pratyush