如何使 Pinterest Widget Builder 具有响应性？答案

【问题标题】：How do I make a Pinterest Widget Builder Responsive?如何使 Pinterest Widget Builder 具有响应性？
【发布时间】：2014-10-06 05:54:49
【问题描述】：

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

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

【问题讨论】：

标签： pinterest

【解决方案1】：

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

封闭元素的宽度：不能超过该宽度
data-pin-scale-width + padding 的倍数：小部件的宽度不会向右填充。这将是内部项目的倍数 + 左右小填充的大小，以及项目之间的填充
鉴于上述情况，数据引脚刻度宽度显然

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

【讨论】：

嗨，Henri，看起来关键是 data-pin-scale-width 和确切的 pin-board-width 的组合。谢谢。

【解决方案2】：

这是我想出的解决方案：http://pastebin.com/kXVDWUu8

我建议包括以下样式：

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

为了使 Pinterest 小部件具有响应性，这是适合我的解决方案。取自here。

CSS

#pinterest-container {
    display: flex;
}

#pinterest-container a {
    flex: 1;
}

【讨论】：