Bootstrap CSS 弄乱了可折叠菜单的 z-index？

Question

基本上，我的网站有一个粘性标题和侧边栏导航，但是当屏幕变小时，菜单采用可以展开可折叠侧边栏的汉堡按钮。

这按预期工作，除了一件事：包含引导 CSS cdn。

因此，如果我注释掉引导 CSS 的 CDN，它可以正常工作，但如果我包含它并使屏幕移动大小，则在点击菜单按钮时，菜单会在主 div 的主要内容卡下展开。如果我将其注释掉，菜单会按应有的方式在卡片顶部展开。

在我上面的 codepen 中，它有引导 CDN 来显示错误。我有一个自定义 CSS，它也附加在那里，我在那里有很多样式，我只是想知道如何修复这个问题，并且仍然有引导 CSS 用于其他样式。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<header>
  <div class="branding">
    <div class="menu-button menu-toggle nav">
      <i class="material-icons">menu</i>
    </div>
    <img src=""/>
  </div>
  <div class="page-details"></div>
  <div class="settings">
    <div class="menu-button profile">
      <i class="material-icons">person</i>
    </div>
    <div class="menu-button menu-toggle aside">
      <i class="material-icons">chat</i>
    </div>
  </div>
</header>
<div class="app">
  <nav>
    <div class="title-block">
      <img src=""/>
    </div>
    <ul>
      <li>
        <a href="#">
          <i class="material-icons">home</i>
          <span>Home</span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="material-icons">adb</i>
          <span>Menu Item with a Long Name</span></a></li>
      <li>
        <a href="#">
          <i class="material-icons">android</i>
          <span>Android</span></a></li>
      <li>
        <a href="#">
          <i class="material-icons">attachment</i>
          <span>Attachments</span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="material-icons">bookmark</i>
          <span>Bookmarks</span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="material-icons">star</i>
          <span>Favorites</span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="material-icons">build</i>
          <span>Configuration</span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="material-icons">cake</i>
          <span>Birthday Party</span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="material-icons">brush</i>
          <span>Designer</span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="material-icons">camera</i>
          <span>Photos</span>
        </a>
      </li>
    </ul>
  </nav>

  <!--These are the cards that the menu expands underneath-->
  <article>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </article>
</div>

Answer 1

将z-index: 9999; 添加到nav.open 有效。

Answer 2

nav.open {z-index: 1 !important};

Z-index 将允许您在其他元素之上显示导航，并且 !important 将帮助您覆盖引导 css