Bootstrap 导航栏溢出的自定义文件输入错误

Question

我编写了一个固定顶部的导航栏。

当我滚动时，如果有正文内容穿过它，它必须被隐藏。它有效，但是当我对文件字段使用 bootstrap 自定义 class 时，出现了一个错误。文件字段与导航栏重叠时不隐藏。

我在这里重现了这个问题：

html

<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            </ul>
        </div>
    </nav>

<!-- Bootstrap custom file input -->
<div class="container">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01"
           aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>

css

html, body{
          padding-top: 30px;
      }
      .navbar {
        overflow: hidden;
        background-color: black;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1;
      }

      .navbar .bg-primary{
        border: 1px solid black;
      }

以及演示：https://jsfiddle.net/kiuega/u3z8be4c/3/

你知道问题出在哪里吗？

编辑：我刚刚注意到当我们使用 FullCalendar (https://fullcalendar.io/docs) 时发生了同样的事情，这是一回事！

Answer 1

将 Navbar "z-index" 更改为 2 或更多.. 最好将 z-index 设置为 9999（极值），这意味着它始终位于内容的顶部.. 否则，如果有任何其他 div 或部分的 z-index 大于导航栏，则该 div 或部分与导航栏重叠..

.navbar {
    overflow: hidden;
    background-color: black;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
  }

Bootstrap 导航栏溢出的自定义文件输入错误

Bootstrap custom file input bugs on navbar overflow

html

css

file

overflow

navbar