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

问题描述

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

这按预期工作，除了一件事：包含引导 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>

标签： htmlcssbootstrap-4

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

问题描述

解决方案

推荐阅读