如何防止放置类似于下面代码的 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>
感谢您的帮助。
最佳答案
我已经设置了一个 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;
}
关于twitter-bootstrap - 响应式 Adsense 单元中断 Bootstrap 面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45017191/