Question

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

除了一件事之外，它按预期工作：包含bootstrap CSS cdn。

所以如果我注释掉CDN for bootstrap CSS它可以正常工作，但如果我包含它并使屏幕移动大小，点击菜单按钮后，菜单会扩展到主div中的主要内容卡下。如果我将其评论出来，则菜单会在卡片顶部展开。

在上面的codepen中，它有自举CDN来显示错误。我有一个自定义的CSS也附在那里，我有很多样式，我只是想知道如何解决这个问题，并且仍然有其他stying的bootstrap 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

nav.open {z-index：1！important};

Z-index将允许您在其他元素的顶部显示导航，而！important将帮助您覆盖bootstrap css

Answer 2

将z-index: 9999;添加到nav.open工作。

Bootstrap CSS搞砸了可折叠的菜单z-index？

2 个答案: