4

目前，Google Plus 徽章会自动响应宽度的变化：https ://developers.google.com/+/plugins/badge/

我们的新网站设计使用 Bootstrap 进行响应式布局，我们如何才能使其具有响应性？

这是我们当前的徽章代码：

<!-- Place this tag where you want the badge to render. -->
<div class="g-plus" data-width="230" data-href="//plus.google.com/102018846923934084444" data-rel="publisher"></div>

<!-- Place this tag after the last badge tag. -->
<script type="text/javascript">
  (function() {
   var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
   po.src = 'https://apis.google.com/js/plusone.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

如您所见，默认宽度为 230 像素。有点困惑如何干净地做到这一点？

谢谢！

4

3 回答 3

4

这对我有用。万一我们只有一个g级徽章。

<div id="google-badge" style="width: 100%">
    <!-- Place this tag where you want the widget to render. -->
    <div class="g-person" data-href="//plus.google.com/104771303799616655833" data-rel="author" data-width="180"></div>
    <!-- Place this tag after the last widget tag. --><script type="text/javascript">
    window.___gcfg = {lang: 'de'};

    // just put this in here
    document.getElementsByClassName('g-person')[0].setAttribute('data-width', document.getElementById('google-badge').clientWidth);

    (function () {
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/platform.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
    })();
    </script>
</div>
于 2013-12-01T19:48:12.470 回答
2

您可以使用“静态”徽章选项，而不是使用小部件，它基本上只是一个链接和一个图像。小部件代码在呈现后不会监听其属性的更新。此外，徽章小部件上的高度和宽度具有可能最终导致徽章无法呈现的约束，具体取决于在响应式布局中如何计算宽度/高度。

你会失去静态徽章的动态功能，比如人们可以立即将你添加到一个圈子而不离开，但它确实为你提供了对布局的更多控制。

于 2013-01-10T16:27:34.990 回答
0

这就是我所做的...

使用 twitter 的引导脚手架类，我创建了多个徽章，这些徽章根据浏览器所处的“模式”（例如台式机、平板电脑或手机）呈现。

Twitter Bootstrap 脚手架

那行得通！

于 2013-01-13T19:41:22.690 回答