如何让Bootstrap 3在下拉列表中下推页面内容

时间:2013-12-18 22:23:54

标签: javascript css twitter-bootstrap

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

我查看了stackoverflow,到目前为止我能找到的所有问题都是询问如何叠加内容而将其推下来。我想反过来(我认为这必须随Bootstrap 3改变)。

我知道这是可能的,因为在网站的响应版本上,右上角的切换按下了页面内容,我想要下拉菜单:

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

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

如果菜单未折叠,如何将该功能添加到下拉项目中?

谢谢!


编辑:

以下是我根据@ hsb1007的回复添加解决方案的jQuery:

$('.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);         
})

1 个答案:

答案 0 :(得分:3)

在不知道您的网站结构的情况下,很难解释

从现在开始,你必须将'margin / padding'放到你的内容栏中才能被推下来。

因为其他方面,当下拉菜单出现时,您的菜单会变得不稳定。

使用基于事件的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();
})

而且,我实际上没有尝试过上面的任何代码,但它应该可行。 =)