如何使用引导程序完全隐藏 div答案

【问题标题】：How to completely hide a div with bootstrap如何使用引导程序完全隐藏 div
【发布时间】：2013-12-26 22:10:05
【问题描述】：

我正在开发一个网站，该网站在主要内容 div 上方的 div 中显示通知（无效登录详细信息、成功注册等）。通知的显示就像一个魅力，但我也希望用户能够通过单击一个按钮来隐藏通知。

为此，我使用了引导程序中的“折叠”类。然而，这显然是错误的方法，因为 div 并没有完全消失，而是留下一个可见的小笔划。我认为这可能是预期的行为，我根本不应该使用崩溃类。所以现在我的问题是：当单击按钮时，如何巧妙地隐藏带有引导程序的 div？

我当前的代码是：

<div id="notifications_errors" class="hero-unit collapse in">
    <a class="close pull-right" data-toggle="collapse" data-target="#notifications_errors" href="#">&times;</a>
</div>

【问题讨论】：

标签： html twitter-bootstrap hide

【解决方案1】：

使用 Bootstrap 并不会阻止您这样做：

$('#someButton).click(function(event){ $('#someDiv').toggle() })

您的项目中包含了 jQuery [如果您使用任何 BS js 插件，您应该这样做]。

【讨论】：

我知道，我只是想知道是否有更“引导”的方式来做这件事。无论如何，谢谢！
Bootstrap 只是以类似的方式使用 jQuery。您描述的问题是样式之一，而不是 jQuery。

【解决方案2】：

尝试将您的内容移动到单独的 div 块中，这很可能是 hero-unit 类的 css 与 collapse css 冲突。

<div id="notifications_errors" class="collapse in">**
  <div class="hero-unit">
    <a class="close pull-right" data-toggle="collapse" data-target="#notifications_errors" href="#">&times;</a>
  </div>
</div>

这应该让 .collapse 类的 .height:0 和 overflow:hidden 属性正常工作。（我在尝试将折叠与警报格式一起使用时遇到了类似的问题，这为我修复了它）

【讨论】：