Question

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

以下是代码：

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

第一个覆盖宽度，否则将被修复，使其响应。第二个问题是如果窗口小部件非常狭窄，则不会显示最后一列的问题。

Answer 2

小部件的宽度取决于许多因素：

封闭元素的宽度：不能超过该宽度
数据引脚比例宽度+填充的倍数：窗口小部件的宽度不会向右填充。这将是内部多个项目的大小+左右小填充，以及项目之间的填充
鉴于上述情况，数据引脚比例宽度明显

因此，如果您想要精确的宽度1200，请尝试data-pin-scale-width="195"。应该这样做，假设封闭元素更大。

Answer 3

以下是我提出的解决方案：http://pastebin.com/kXVDWUu8

我建议包括以下样式：

#pin-container > span {
    box-shadow: none !important;
    width: 100%;
    overflow: hidden;
}

Answer 4

为了使Pinterest小部件响应，这是适用于我的解决方案。取自here。

CSS

#pinterest-container {
    display: flex;
}

#pinterest-container a {
    flex: 1;
}

如何让Pinterest Widget Builder响应？

4 个答案: