Question

如何防止类似于以下代码放置的Adsense响应单元突破面板？根据我的经验，横幅打破了面板并占据了全宽。用于Adsense响应单元的代码是Google提供的默认代码。

<div class="col-md-12" style="padding-top:20px;">
    <div class="panel panel-default panel-profile m-b-md">
        <div class="panel-body text-center" style="padding: 5px 0 5px 0">
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- Thank You -->
            <ins class="adsbygoogle"
                 style="display:block;"
                 data-ad-client="ca-pub-xxxxxx"
                 data-ad-slot="xxxxxx"
                 data-ad-format="auto"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>
    </div>
</div>

感谢您的协助。

Answer 1

我已经设置了一个Plunker测试，对我来说一切看起来还不错： https://plnkr.co/edit/YTVHcR2SjMdEPyaM0Owa?p=preview

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
  <script>
    $(document).ready(function() {
      (adsbygoogle = window.adsbygoogle || []).push({})
    })
  </script>
</head>

<body>
  <h1>Hello Plunker!</h1>
  <div class="col-md-12" style="padding-top:20px;">
    <div class="panel panel-default panel-profile m-b-md">
      <div class="panel-body text-center" style="padding: 5px 0 5px 0">
        <!-- adsense responsive unit code -->
        <ins class="adsbygoogle" data-ad-client="ca-pub-9482555242423991" data-ad-slot="1928867468" data-ad-format="auto"></ins>
      </div>
    </div>
  </div>
</body>

</html>

CSS：

.adsbygoogle {
  display: inline-block;
  width:100%;
  overflow: hidden;
}

响应Adsense单元打破引导面板

1 个答案: