引导CSS搞乱可折叠菜单z索引？

Question

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

除了一件事:包含引导CSS cdn之外，这一切都像预期的那样工作。

因此，如果我注释掉引导CSS的CDN，它就能正常工作，但是如果我包含它并使屏幕移动大小，点击菜单按钮，菜单就会在主div的主内容卡下面展开。如果我把它注释掉，菜单就会像它应该的那样在卡片上展开。

在我上面的代码中，它有引导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-索引:1！重要}；

Z-索引将允许您在其他元素的基础上显示nav，而“重要”将帮助您覆盖引导css。