pinterest - 如何使 Pinterest Widget Builder 具有响应性？

Question

Pinterest Widget Builder允许灵活地创建小部件以放置在您的网站上。我在 this page 上加了一个，但您可以为小部件设置的宽度似乎有限制。例如，我将宽度设置为 1170，但它仅显示为 1111 像素。

这是代码:

<a data-pin-do="embedUser" href="http://www.pinterest.com/rouvieremedia/" data-pin-scale-width="180"  data-pin-board-width="1170">Follow Pinterest's board Pin pets on Pinterest.</a>

这是一个 Bootstrap 站点，我真的很希望能够使这个小部件也具有响应性。我尝试将 css 样式应用到小部件，只是为了看看我是否可以使用它来影响它。唉，没有运气。

div.container > span.PIN_1407891215996_embed_grid.PIN_1407891215996_fancy { 
    border: 5px solid red; 
}

任何与此元素交互的建议将不胜感激。然后我可以应用一些额外的样式。

Answer 1

将您的小部件包装在容器中，例如#pinterest-container ，并添加以下样式:

#pinterest-container > span {
    width: 100% !important;
    overflow: hidden;
}

#pinterest-container > span > span > span > span {
    min-width: 0;
}

第一个覆盖原本固定的宽度，使其具有响应性。第二个处理如果小部件非常窄则不显示最后一列的问题。