如何让 Bootstrap 3 在下拉点击时向下推送页面内容

How to get Bootstrap 3 to push down page content on dropdown click

本文关键字：下推 Bootstrap      更新时间：2023-09-26

Google AdSense禁止网站用任何元素掩盖广告 - 即使是扩展的下拉菜单 - 所以我正在寻找一种方法来告诉Bootstrap在点击下拉菜单时向下推送页面内容，因此排行榜被向下推而不是被掩盖。

我已经查看了stackoverflow，到目前为止我能找到的所有问题都是如何覆盖内容而不是将其推倒。我想做相反的事情（我认为这肯定在 Bootstrap 3 中发生了变化）。

我知道这是可能的，因为在网站的响应式版本上，右上角的切换按钮会向下推页面内容，这正是我希望下拉菜单做的：

http://getbootstrap.com/examples/navbar/

（打开此链接并缩小浏览器窗口，然后单击右上角的三行）。

当菜单未折叠时，如何将该功能添加到下拉项？

谢谢！

编辑：

以下是我添加的 jQuery，用于根据 @hsb1007 的响应解决解决方案：

$('.class-name-1').on('show.bs.dropdown', function () {
     $('.leaderboard').css('margin-top', 450);       
})
$('.class-name-2').on('show.bs.dropdown', function () {
     $('.leaderboard').css('margin-top', 200);       
})
$('.dropdown').on('hide.bs.dropdown', function () {
     $('.leaderboard').css('margin-top', 0);         
})

不知道你的网站结构，很难解释

从我现在的头顶上，您必须将"边距/填充"放在您的内容栏中才能向下推。

因为其他明智的做法，当下拉菜单出现时，您的菜单会变得不稳定。

使用他们基于事件的 API。 见下文

$('#myDropdown').on('show.bs.dropdown', function () {
     // this part will be trigged when dropdown is called
     // add margin / padding to your adsense container
})

要获得动态高度， 

$('#myDropdown').on('shown.bs.dropdown', function () {
     // this part will be trigged after dropdown is shown
     // Grab height of dropdown
     var height = $('.dropdown').outerHeight();
})

再说一次，我实际上还没有尝试过上面的任何代码，但它应该可以工作。 =）

相关文章：