부트 스트랩 3 반응 형 클래스가 디스플레이 속성을 변경합니다.

Question

부트 스트랩 2.3에서 부트 스트랩 3.0으로 프로젝트를 업그레이드 할 때 반응 형 클래스를 추가하는 것으로 나타났습니다. hidden-sm을 요소에 추가하면 CSS 표시 속성이 block으로 변경됩니다.

새로운 디스플레이 속성은 !important으로 설정되어 사용자 정의 CSS 규칙으로 덮어 쓰기가 어렵거나 (적어도 못생긴) 만듭니다. 예를 들어

코드 (여기 뷰 결과 : http://jsfiddle.net/RZ95F/)

<h1> 
    Heading 
    <small class="hidden-sm">sub-Heading</small> 
</h1> 

즉, 라인 브레이크를 추가

<h1> 
    Heading 
    <small>sub-Heading</small> 
</h1> 

은 (http://jsfiddle.net/vTuW8/ 여기 뷰 결과) 코드와는 다른 결과를 얻을 표목과 소제목 사이.

물론이 이상한 동작은 훨씬 더 복잡한 경우에도 적용되므로이 새로운 부트 스트랩 동작을 보완하기 위해 주요 마크 업과 CSS 변경없이 프로젝트를 업그레이드하는 것이 매우 어렵습니다.

display 이러한 요소의 동작을 변경하여 부트 스트랩 팀이 수행하려고 시도한 것은 무엇입니까? Bootstrap 2.3 이전 버전에서 알려진 동작을 복원하기위한 쉬운 해결 방법이 있습니까?

Answer 1

이것은 GitHub에서 #8869으로 추적됩니다. 이 도시 간단한 해결 방법은 별도의 인라인 도우미 클래스를 추가하는 것입니다. 그런 다음

.hidden-inline-xs { 
    display: inline !important; 
} 
@media (max-width: 767px) { 
    .hidden-inline-xs { 
    display: none !important; 
    } 
} 

그냥

<h1> 
    Heading 
    <small class="hidden-inline-xs">sub-Heading</small> 
</h1>