Bootstrap中的列装订线问题

Question

所以我设置了我的网页，因此背景图像是12个图像分为列。我这样做是因为我需要在背景图像上堆叠更多图像并以完全相同的方式折叠，我需要多个背景图像，每个媒体查询一个。所以我的问题是一切都很好，直到我达到大约775px宽度，然后排水沟重新出现，如果我移动较小，列开始垂直堆叠，尽管事实上我为列xs指定了一个设置。天沟甚至没有在编码器中正常工作，所以也许我一共都做错了。我是初学者和网络开发的新手，所以我可能做了些傻事！

我添加了原始图片，全屏背景，中等大小的浏览器窗口以及它打破的位置。此外，这是codepen链接。 http://codepen[dot]io/kathryncrawford/pen/GpeyGP

Answer 1

如果您使用<map>元素，则可以使用<img>属性来实现所需。我已经将它用于我创建的网页。 <map>元素允许我完美地执行此操作，因为我能够使用shape，coords和href属性操作图像。通过使用shape和coords属性，我可以从地图中选择每个单独的图像，并允许每个图像的完整部分充当可点击链接。 Href允许我包含将用户带到所选内容的页面链接。为了获得坐标，我采用了每个房屋图像的左上角和右下角，并将它们包含在coords属性中以指定图像的尺寸。

例如

<map name="test">
  <img src="images/back/background1.png" usemap="#test" height="set your height" width="set your width" ismap="ismap" />
  <area shape="default" coords="8,0, 184, 826" href="insert the link for the page that you want the user to be directed too" alt="" />
</map>

这意味着您只能使用一张图片作为整体背景，而不是包含相同的图像多次。