Question

我想在引导程序的navbar-fixed导航栏下面附加一些固定警报。我最好的尝试是将div定位在50px position: fixed;和width: 100%，并在此div中插入警报。问题在于，这会切断我的其他内容的顶部，就像navbar-fixed在内容元素未应用填充时切断内容一样。

#Alerts
{
  position: fixed;
  width: 100%;
  top: 50px;
}
.alert
{
  top: 0px;
  //position: fixed;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 4px;
  padding-bottom: 4px;
  margin-bottom: 0px;
  border-radius: 0px;
}
body {
  padding-top: 50px; // to avoid 'underlapping' the navbar
}

这是指向不工作示例的链接：http://www.bootply.com/pnEHtLhUBi

目前我最好的想法是在创建/销毁警报时使用JS来调整padding-top上的body值，但这可能对维护/可读性不利而且我不知道我更喜欢用css做一些更具声明性的事。

有什么建议吗？

Answer 1

看起来没有js就没有办法做到这一点。

因为警报是动态的，这意味着它仅在通过alert method

触发时才会显示

$('#alert-danger').show('slow', function(){
    $('body').addClass('moreMargin')
});

隐藏警报时，您也可以从正文中删除moreMargin类

Answer 2

如何将它放在与导航相同的div中。当他们弹出时，他们会推下其他内容吗？

此外，由于这些是警报，用户是否已经看过正在覆盖的内容？如果他们想再次看到它们，他们就可以关闭警报。也许我只是误解了你的目的？

修复了bootstrap固定导航

2 个答案: