使用Bootstrap v2.2.2
我正在尝试将图像映射应用到我的span 4类中,除了图像映射类正在敲除对齐(它似乎突破容器或行类而不是在响应断点中缩放图像)。我是一名交易设计师,所以我缺乏CSS认知,我认为这需要。 某处存在代码冲突!
这就是我所做的:
<div class="container">
<div class="row">
<div class="span4">
<h4>
text
</h4>
</div>
<div class="span4">
<h3>
text
</h3>
</div>
<div class="span4 map_image" style="background-image: url('assets/img/tradeLogos.jpg');">
<a class="map_link" id="map_link_0" title="The Guild of Master Craftsmen" href="http://www.guildmc.com/"></a>
<a class="map_link" id="map_link_1" title="Federation of Master Builders" href="http://www.fmb.org.uk/"></a>
<a class="map_link" id="map_link_2" title="Build Assure" href="http://www.fmbuildassure.co.uk/"></a>
<a class="map_link" id="map_link_3" title="Gas Safe" href="http://www.gassaferegister.co.uk/"></a>
<a class="map_link" id="map_link_4" title="European Builders Confederation" href="http://www.eubuilders.org/"></a>
<a class="map_link" id="map_link_5" title="Velux Roof Windows" href="http://www.velux.co.uk/"></a>
<a class="map_link" id="map_link_6" title="Napit" href="http://www.napit.org.uk/"></a>
<a class="map_link" id="map_link_7" title="Trust Mark" href="http://www.trustmark.org.uk/"></a>
</div>
</div>
</div>
CSS:
.map_image { display: block; width: 360px; height: 182px; position: relative; background-position: 0 0; background-repeat: no-repeat; } .map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; } .map_image #map_link_0 { width: 78px; height: 81px; top: 7px; left: 1px; } .map_image #map_link_1 { width: 77px; height: 82px; top: 8px; left: 91px; } .map_image #map_link_2 { width: 98px; height: 78px; top: 9px; left: 175px; } .map_image #map_link_3 { width: 73px; height: 75px; top: 10px; left: 284px; } .map_image #map_link_4 { width: 72px; height: 81px; top: 98px; left: 1px; } .map_image #map_link_5 { width: 105px; height: 81px; top: 99px; left: 81px; } .map_image #map_link_6 { width: 71px; height: 81px; top: 99px; left: 193px; } .map_image #map_link_7 { width: 85px; height: 78px; top: 99px; left: 272px; }