2014-12-19 6 views
2

나는 회전 목마를 만들었으며 스타일 표시기 버튼을 무시해야합니다.부트 스트랩 스타일을 재정의하는 방법

.carousel-indicators { 
    position: absolute; 
    bottom: 10px; 
    left: 50%; 
    z-index: 1; 
    width: 60%; 
    padding-left: 0; 
    margin-left: -30%; 
    text-align: center; 
    list-style: none; 
    display: inline-block; 
} 

얻을 필요 :

.carousel-indicators { 
    z-index: 1; 
    padding-left: 0; 
    list-style: none; 
    display: inline-block; 
} 

어떻게 기본 스타일을 무시하거나 제거합니까 나는 스타일을 가지고?

답변

2

스타일을 기본 CSS로 사용 하시겠습니까?

.carousel-indicators { 
    z-index: 1; 
    padding-left: 0; 
    list-style: none; 
    display: inline-block; 
    /*lets override other properties*/ 
    position: static;/*or relative*/ 
    width: auto; 
    margin: 0; 
    text-align: left; 
} 

상단, 왼쪽은 당신이 사용하는 부트 스트랩 버전 그

0

에 대한 감지되지 않습니다 정적 위치를 사용으로 수정할 필요가 없습니다?

CSS 버전 인 경우 더 구체적인 선택기로 스타일을 작성하면됩니다. 예를 들면 : 당신은 부트 스트랩 (내가 항상 추천 옵션)의 LESS 버전을 사용하는 경우

#your-carousel .carousel-indicators { 
    /* your styles*/ 
} 

, 당신은 쉽게 carousel.less 파일에서 변경할 수 있고, CSS 버전으로 컴파일합니다.

+0

부트 스트랩 v3.3.1. 어쨌든 부트 스트랩으로로드 된 스타일을 시도했습니다. –

+0

OK,하지만 이미 컴파일되어 있고 CSSversion (예 : CDN)에 링크를 넣었거나 로컬 .less 버전이 있고 각 변경 후에 CSS로 컴파일하면됩니다. –

0

또한 모든 것이 올바르게 작동하도록 스크립트를로드하는 순서를 주시해야합니다. CSS를 덮어 쓰는 경우 마지막으로 덮어 쓰여진 코드가로드되어야합니다. 또한 흥미로운 중요한 사용하는 것이다 :

.exampleClass { 
    margin: 0 !important; 
} 
.exampleClass { 
    margin: 5px; 
} 

.exampleClass 0의 여유를 가질 수 있도록하기 때문에로 두 번째를 덮어 쓰게됩니다 중요한이 지시어는 더 높은 가중치가 브라우저를 말할 수있는 첫 번째! 다른 사람들보다. 그러나 CSS는 중요한 문장을 곱할 때 코드의 논리적 로딩 순서를 사용합니다.이 경우 브라우저는 다른 단어보다 중요한 단어를 알 수 없기 때문입니다.

관련 문제