미디어 쿼리로 데이터 속성 사용

Question

나는 가장 넓은 해상도에서 아래 이미지를 볼 수 있도록 설정하고 있습니다. 그러나 더 작은 해상도에서 페이지 설정이 화면에 표시되는 이미지가 변경되므로 미디어 쿼리 및 data를 사용하고 싶었습니다.속성.문제만 :

1. data 속성을 올바르게 사용하고 있는지 확실하지 않고
2. 텍스트 뒤에 배지의 이미지를 표시하기 위해 <p>를 사용하여 :after 태그를 선택자로 대상으로 할 수있는 방법이 없습니다.

이것은 jquery / jscript를 요구 사항으로 사용하지 않으므로 고통의 종류입니다. 데모, 부트 스트랩으로 올바르게 구성해야합니다. (이미지가 올바르게 링크되지만 표시되지 않음)attr 때문입니다.)

샘플 HTML :

<div id="main" class=" container">
<div class="row">
    <div class ="col-lg-6 " id="badgeBox"> 
        <div class ="col-lg-12" data-test="<a href='http://www.va.gov/'  target='_blank'><div class='badgeContainer'><img  id='va_badge' class =' badges img-responsive' src='http://i.imgur.com/BAbUq6v.jpg'alt='Veteran Affairs Badge'></a></div>"> </div>
         <span><p> U.S.  Department of Veteran's Affairs</p></span>

    </div>
  </div>    
</div>

.

샘플 CSS :

.badgeContainer {
width: 30%;
}    
@media screen and (min-width: 1200px) {
//some selector that targets the p tag// :after {
content:"("attr(data-test) ")";
}
}

.

Answer 1

데이터 속성에서 콘텐츠를 설정하면 이와 같이 작동합니다. 그러나 데이터 테스트는 p 내에 있어야하며 data-test 내에서 HTML 컨텐츠를 인코딩하는 문제가 더 큰 문제가 있습니다.

@media screen and (min-width: 1200px) {
  p:after {
    content: attr(data-test);
  }
}

.

더 많은 부트 스트랩 친화적 인 접근 방식은 포함 된 유틸리티 클래스 ( http://getbootstrap.com)를 사용하는 것입니다./ CSS / # 응답 유틸리티 ) 큰 해상도에서 이미지 링크 만 표시합니다. visible-lg를 사용하십시오.

여기에 두 가지 접근 방식이있는 데모가 있습니다. http://bootply.com/94916