부트 스트랩 캐로 셀에서 캡션 텍스트를 오른쪽으로 정렬하는 방법은 무엇입니까?

Question

트위터 부트 스트랩 카로 셀의 캡션 텍스트를 오른쪽으로 정렬하고 싶습니다. 그렇게하려면 어떻게해야합니까?

<div class="carousel-inner"> 
    <div class="item active"> 
     <img src="img/img1.png" alt="" class="img-responsive"> 
     <div class="carousel-caption right-caption"> 
      This is the text I want to put on the right. 
     </div> 
    </div> 
</div> 

Answer 1

text-right 텍스트로 줄 바꿈을 시도해보십시오. 센터로 설정, carousel-caption에 대한 현재의 텍스트 정렬의 CSS 스타일이 있기 때문에, 작동하지 않습니다 carousel-caption 사업부에 text-right 추가

:

<div class="carousel-inner"> 
    <div class="item active"> 
     <img src="img/img1.png" alt="" class="img-responsive"> 
     <div class="carousel-caption right-caption text-right"> 
      This is the text I want to put on the right. 
     </div> 
    </div> 
</div> 

Answer 2

그냥 나는이에 좀 더 통찰력을 제공 할 수 있습니다.

이 CSS 블록은 text-right 클래스가 부트 스트랩 스타일로 표시된 후에 text-right을 추가해도 carousel-caption 스타일보다 우선 적용되지 않습니다. text-left, text-center 및 text-right 클래스 !important 아무것도 무시하도록 추가해야으로

이, 내 생각에, 잘못된 것입니다.

텍스트 정렬을 변경할 수있는 유일한 방법은 carousel-caption에 대한 고유 한 CSS 스타일을 만드는 것입니다. 당신은 여전히 ​​클래스로 text-right을 추가하고 그것을 사용하려면

.carousel-caption { 
    text-align: right; 
} 

---

, 당신은 사용자 정의 CSS 블록이를 추가해야합니다 :

.carousel-caption.text-right { 
    text-align: right; 
}