将粘性和浮动导航栏与 bootstrap 4 相结合答案

【问题标题】：Combining both a sticky and floating navbar with bootstrap 4将粘性和浮动导航栏与 bootstrap 4 相结合
【发布时间】：2019-07-26 08:08:49
【问题描述】：

我正在模拟一个基于我在 EA GAMES 网站上看到的导航栏。我让它在 Chrome 中正常工作，但不能让它在 IE 中看起来不像垃圾。如果可以的话，我正在寻找有关如何使其工作的提示？

这是我的代码笔：https://codepen.io/okaykaylyn/pen/bQWXqq

<!--   Fixed top    -->
<nav class="navbar sticky-top navbar-dark bg-dark justify-content-end" id="fix_nav">
<a class="navbar-brand ml-auto" href="#"><i class="fas fa-user"></i></a>
<a class="navbar-brand" href=""><i class="fas fa-cog"></i></a>

</nav>


<!--   floating nav    -->
<div class="container col-12">
<nav class="mt-3 navbar navbar-dark bg-dark navbar-expand-lg rounded" id="float_nav">
<a class="navbar-brand" href="#"> 
<img src="https://image.ibb.co/cZBKcq/Asset-2.png" id="logo"></a>
<div class="collapse navbar-collapse" id="navbarText">
 <ul class="navbar-nav mr-auto">
   <li class="nav-item active">
    <a class="nav-link text-left d-flex" href="#">Home <span class="sr-only">(current)</span></a>
  </li>
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Accounts
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">My Accounts</a>
      <a class="dropdown-item" href="#">Agency Accounts</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Indications</a>
    </div>
  </li>
 <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Tools
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">Products & Applications</a>
      <a class="dropdown-item" href="#">Claims Examples</a>
      <a class="dropdown-item" href="#">Reports</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Fun</a>
    </div>
   </li>      
       <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      About
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">Team</a>
      <a class="dropdown-item" href="#">News</a>
      <a class="dropdown-item" href="#">Charity</a>
    </div>
  </li>
</ul>
</div>
</nav>

相关信息：EA 甚至不让 IE 用户查看他们的网站。不知道是不是这个原因...

【问题讨论】：

问题是什么？您尝试过的代码有什么问题？
@Zim 认为我第一次可能意外遗漏了一个结束标签 - 我遇到的问题是，当我从桌面在 IE 中运行这段代码时，它看起来像一个无定形的 blob屏幕顶部。然而，当我昨天再次尝试时，它看起来很好。不确定是否有删除问题的选项... ^^;

标签： html css internet-explorer bootstrap-4 navbar

【解决方案1】：

从MDN documentation about justify-content 可以看出，IE 不支持 justify-content-end 属性。这就是为什么它在 IE 中看起来不太好。

我已经测试了您的代码，发现在您的情况下，您只需删除 justify-content-end 属性，它就可以像以前一样在 Chrome 和 IE 上正常运行。

【讨论】：