单击后更改引导导航栏折叠样式答案

【问题标题】：Bootstrap Navbar collapse style changing after clicking单击后更改引导导航栏折叠样式
【发布时间】：2016-08-06 08:10:53
【问题描述】：

http://codepen.io/ruchiccio/pen/ONvoaE

我有一个带有下拉菜单的导航栏。这个下拉菜单有几个孩子，其中之一也是一个下拉列表（即品牌）。当我单击此下拉列表，然后使用切换插入符号再次将其关闭时，我的整个导航栏折叠 div 周围的 1px 边框消失了。我看不出是什么导致了这种情况发生。

当我单击“品牌”下拉菜单，将其关闭，然后尝试单击下拉菜单中的常规链接（即“关于”）时，我也会得到奇怪的边框变化。

代码如下：

 <div id="navbar" class="navbar-collapse collapse">
   <ul class="nav navbar-nav">
      <li><a>About</a></li>
      <li class="dropdown">
         <a class="dropdown-toggle" data-toggle="dropdown">Brands<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a>Brand 1</a></li>
    ...

【问题讨论】：

能否请您包含导航栏的完整 HTML 代码以排除用户错误，这对用户测试您的整个代码很有用。
由于某种原因我无法复制该错误。我附上截图。
我们不需要屏幕截图，我们需要您编辑您的问题并包含您的完整代码...它停止在<li><a>Brand 1</a></li>
我尝试将它添加到 codepen 和 bootply，但问题没有发生。它也不会出现在我的手机（iOS）上。无论如何，我会添加代码。此外，如果我删除 float:right 并将其默认设置为左侧，也没有问题。

标签： javascript html css twitter-bootstrap

【解决方案1】：

我想出了一个解决方案。我给了 navbar-collapse 绝对定位，用 right:0 让它保持在屏幕的右侧。显然，浮动不同意崩溃。

【讨论】：