twitter-bootstrap – 如何使Google Plus徽章响应？

发布时间：2020-12-17 21:32:04 所属栏目：安全来源：网络整理

导读：目前,Google Plus徽章会自动响应宽度变化： https://developers.google.com/+/plugins/badge/ 我们的新网站设计使用Bootstrap进行响应式布局,我们如何才能使其响应？这是我们当前的徽章代码： !-- Place this tag where you want the badge to render. --di

目前,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像素.有点困惑如何干净利落地做到这一点？

谢谢！

解决方法

这对我有用.如果我们只有一个g-person-class类徽章.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!