这个 Bootstrap CSS Google Adsense 响应行为正确吗？答案

【问题标题】：Is this Bootstrap CSS Google Adsense Responsive behaviour correct?这个 Bootstrap CSS Google Adsense 响应行为正确吗？
【发布时间】：2020-10-01 13:29:55
【问题描述】：

我很难让我的 Google AdSense 水平广告在调整大小后在桌面分辨率上响应。

当广告在移动设备上加载时 - 它可以正确加载，即美观且小巧。

但在桌面上它最初加载正确，但如果你调整浏览器的大小，它会使页面非常难看，因为你可以沿着广告一直滚动，这会将网站推向一边......

代码如下：

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>

还有实际的 HTML

<div class="container">
  <div class="row">
    <div class="col-xs-12">

          <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
          <!-- IC Throughtout Site -->
          <ins class="adsbygoogle example_responsive_1"
               style="display:block"
               data-ad-client="ca-pub-XXX"
               data-ad-slot="XXX"
               data-ad-format="horizontal"></ins>
          <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
          </script>


      </div>
    </div>
  </div>

感谢大家的帮助。

【问题讨论】：

您是否尝试过在媒体查询中使用 max-width？
我没有 - 抱歉，我不太清楚该怎么做 - 我从推荐的 Google AdSense 页面中获取了代码...你能分享一下你是如何解决这个问题的吗？
您可以尝试将 body { overflow-x: hidden; } 添加到您的 css，但如果这违反了 ToS，我不这样做。

标签： css twitter-bootstrap adsense

【解决方案1】：

如果您使用的是引导程序，您可以简单地添加如下所示的类以使广告更好地对齐。

<ins class="adsbygoogle ml-4 mr-4">

【讨论】：