html - 将数据属性与媒体查询一起使用

Question

我有一个正在设置的页面，以便它在最宽的分辨率下看起来像下面的图像，但是在较小的分辨率下，页面设置会改变屏幕上显示的图像，所以我想使用媒体查询和 data属性。唯一的问题是:

1. 我不确定我是否正确使用了 data 属性，并且
2. 我不知道如何使用选择器定位 <p> 标签，以便我可以使用 :after 在文本后显示徽章图像。

这不能使用任何 jquery/jscript 作为要求，所以这有点麻烦。 Demo, it should be configured properly with bootstrap.(图片链接正确，但因属性问题无法显示)

示例 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 内，并且您将遇到更大的问题，即在其中对 HTML 内容进行编码数据测试..

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

一种更加 Bootstrap 友好的方法是使用包含的实用程序类 (http://getbootstrap.com/css/#responsive-utilities) 以使用 visible-lg 仅显示较大分辨率的图像链接。

这是一个包含两种方法的演示:http://bootply.com/94916