Question

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

我在每个菜单项中添加了data-toggle="collapse"和data-target="#navbar-collapse"，以便在选择菜单项时菜单会崩溃。

到目前为止一切都那么好，但我注意到即使屏幕尺寸很大也会闪烁，并且导航栏项目不在夹心菜单中。我想这是崩溃动画。

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

Answer 1

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

请让你的主要内容是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网站是一个非常好的资源，他们有一堆带有源代码的例子，但我相信你知道。

不折叠时，bootstrap导航栏闪烁

1 个答案: