我使用的是：Bootstrap 3.1.1，jQuery 1.11
我尝试做的事情：将精灵用于各种类别图标并通过CSS定位。
在xs设备（手机）上我想在每行中保留3个，因为我在小型媒体上大型设备。
但是，每个图标的大小为200x200。而且我不确定如何响应这样的精灵图像。如果我更改#category-icons a.hand-tools width＆amp;高度，它只显示精灵的一小部分，而不是调整精灵的大小。
可以在http://www.amleo.com/images/art/mobile-category-icons.png
找到精灵任何想法，伙计们？我应该使用2个不同的精灵，并在媒体查询中使用下面的CSS来为平板电脑使用不同的精灵。手机？我根本不确定。
寻找最简单的解决方案，当然。
JS小提琴：http://jsfiddle.net/43rxf/
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<a href="/hand-tools/c/P01/" title="Hand Tools" class="hand-tools" target="_blank">Hand Tools</a>
</div>
#category-icons a {
background: url(/images/art/mobile-category-icons.png) no-repeat;
margin-right: 11px;
text-indent: -9999px;
overflow: hidden;
display: inline-block;
margin-bottom: 5px;
-moz-transition: all .2s ease;
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
}
#category-icons a.hand-tools {
background-position: -30px -30px;
height: 200px;
width: 200px;
margin-top: 32px;
}