未折叠时引导导航栏闪烁答案

【问题标题】：bootstrap navbar blinking when not collapsed未折叠时引导导航栏闪烁
【发布时间】：2016-07-06 14:23:23
【问题描述】：

Plunkr

如果您单击菜单项，默认情况下引导导航栏菜单不会在小屏幕上折叠。

我在每个菜单项中添加data-toggle="collapse"和data-target="#navbar-collapse" @ 987654323，以便在选择菜单项时，菜单将折叠。

到目前为止一切都很好，但我注意到即使屏幕很大，也会闪烁，并且导航栏项目不在三明治菜单中。我猜是折叠动画。

我的问题是有什么办法可以防止这种闪烁/禁用 CSS 动画？我知道我可能会用 jQuery 杀死动画，但我宁愿避免这种情况，因为整个应用程序都是用 Angular 构建的，我认为这不是一个罕见的用例。

【问题讨论】：

标签： javascript jquery css twitter-bootstrap navbar

【解决方案1】：

希望这对于您已经拥有的代码来说不是多余的，但您没有提到它，所以我假设您没有它。

将你的主 div 放在 navbar navbar-default 中，然后在里面放一个 container-fluid div，然后把它放在后面：

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navBodyId" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Page Title</a>
</div>

然后你可以有这样的导航栏：

<div class="collapse navbar-collapse" id="navBodyId">
  <ul class="nav navbar-nav">
   ...
  </ul>
</div>

然后关闭我在顶部提到的那两件事。

您不必折叠菜单的每个部分。希望这会有所帮助，如果没有，Bootstrap 网站是一个非常好的资源，他们在下面有一堆带有源代码的示例，但我相信你知道。

【讨论】：

如果您查看我的 Plunkr，您会发现我使用了与您建议的导航栏相同的结构。我不想发布我的 HTML 代码，因为它有 57 行长。抱歉，您的回答没有回答我的问题。
哦，抱歉，我没有看到您在顶部有那个链接