在媒体查询中使用数据属性

Question

我有一个我正在设置的页面，以便在最宽的分辨率下查看下面的图像，但是在较小的分辨率下，页面设置将更改屏幕上显示的图像，因此我想使用媒体查询和{ {1}}属性。唯一的问题是：

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

这个不能使用任何jquery / jscript作为要求，所以这是一种痛苦。 Demo, it should be configured properly with bootstrap.（图像链接正确，但由于attr而未显示。）

示例HTML：

:after

示例CSS：

<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>

Answer 1

我认为从数据属性设置内容会像这样工作。但是，数据测试需要在p内部，并且您将在{{1}内部编码HTML内容的问题更大}} ..

data-test

更友好的Bootstrap方法是使用包含的实用程序类（http://getbootstrap.com/css/#responsive-utilities）仅显示更大分辨率的图像链接使用@media screen and (min-width: 1200px) { p:after { content: attr(data-test); } } 。

以下是两种方法的演示：http://bootply.com/94916