导航栏菜单超级菜单位于内容下方

问题描述

我有一个MDbootstrap超级菜单。

在页面内容下打开的下拉菜单。

我关注了一些questions，但他们建议设置对我不起作用的z-index。

检查CSS类之后，我发现引导网格类（即col-**-*）是问题所在。当我删除课程时，将在内容前面打开下拉菜单。

col-**-*中bootstrap-grid.css的正文如下：

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col,.col-auto,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm,.col-sm-auto,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md,.col-md-auto,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg,.col-lg-auto,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl,.col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

我的导航栏：

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light special-color-light text-dark d-flex">
  <!-- div container -->
  <div class="container">
    <!-- Collapse button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

    <!-- Navbar brand -->
    <a class="navbar-brand text-capitalize d-flex align-items-start flex-column collapseGroup" href="{% url 'index' %}" style="padding-top: 2%;">
      <img src="{%static '/img/black_logo.png' %}" style="width: 110px; height: 110px;" class="logo mr-auto mt-auto" alt="">
    </a>


    <!-- Collapsible content -->
    <div class="collapse navbar-collapse ml-5 d-flex " id="navbarSupportedContent2">

      <!-- Links -->
      <ul class="navbar-nav align-items-end">

        <!-- Products &amp Services -->
        <li class="nav-item dropdown mega-dropdown collapseGroup mt-auto" id="navProductAndServices">

          <a class="nav-link dropdown-toggle text-capitalize font-weight-bold" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products &amp Services
            <span class="sr-only">(current)</span>
          </a>

          <div class="dropdown-menu mega-menu v-2 z-depth-1 special-color-light py-3 px-3" aria-labelledby="navbarDropdownMenuLink2" style=" left: 0%; right: 0%; z-index: 999;">

            <div class="container d-flex align-items-start flex-row ">

              <!-- Industry -->
              <div class="col-md-3 col-xl-3 sub-menu mb-xl-0 mb-4">
                <h6 class="sub-title text-capitalize font-weight-bold text-dark" style="font-size: 20px;">Industry</h6>
                <ul class="list-unstyled text-capitalize">

                  <li>
                    <a class="menu-item pl-0" href="#!">
                      <i class="fas fa-caret-right pl-1 pr-3" style="font-size: 16px;">  Control valves</i>
                    </a>
                  </li>

                  <li>
                    <a class="menu-item pl-0" href="#!">
                      <i class="fas fa-caret-right pl-1 pr-3" style="font-size: 16px;">  Water 4.0</i>
                    </a>
                  </li>

                  <li>
                    <a class="menu-item pl-0" href="#!">
                      <i class="fas fa-caret-right pl-1 pr-3" style="font-size: 16px;">  Markets</i>
                    </a>
                  </li>

                  <li>
                    <a class="menu-item pl-0" href="#!">
                      <i class="fas fa-caret-right pl-1 pr-3" style="font-size: 16px;">  Solutions</i>
                    </a>
                  </li>

                </ul>
              </div>

      </ul>

      </div>

      </div>
    </div>

    </li>
  </div>

  </div>
  </li>

  </ul>
  <!-- Links -->

  </div>
  <!-- Collapsible content -->

  </div>
  <!-- div container -->
</nav>
<!-- Navbar -->

registration.html

<div class="container mt-5 ">
  <form class="form-horizontal" role="form">
    <h2>Registration</h2>

    <div class="form-group ">
      <label for="firstName" class="col-sm-3 control-label">First Name</label>
      <div class="col-sm-9">
        <input type="text" id="firstName" placeholder="First Name" class="form-control" autofocus>
      </div>
    </div>

    <div class="form-group">
      <label for="lastName" class="col-sm-3 control-label">Last Name</label>
      <div class="col-sm-9">
        <input type="text" id="lastName" placeholder="Last Name" class="form-control" autofocus>
      </div>
    </div>
    <div class="form-group">
      <label for="email" class="col-sm-3 control-label">Email* </label>
      <div class="col-sm-9">
        <input type="email" id="email" placeholder="Email" class="form-control" name="email">
      </div>
    </div>
    <div class="form-group">
      <label for="password" class="col-sm-3 control-label">Password*</label>
      <div class="col-sm-9">
        <input type="password" id="password" placeholder="Password" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <label for="password" class="col-sm-3 control-label">Confirm Password*</label>
      <div class="col-sm-9">
        <input type="password" id="password" placeholder="Password" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <label for="birthDate" class="col-sm-3 control-label">Date of Birth*</label>
      <div class="col-sm-9">
        <input type="date" id="birthDate" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <label for="phoneNumber" class="col-sm-3 control-label">Phone number </label>
      <div class="col-sm-9">
        <input type="phoneNumber" id="phoneNumber" placeholder="Phone number" class="form-control">
        <span class="help-block">Your phone number won't be disclosed anywhere </span>
      </div>
    </div>
    <div class="form-group">
      <label for="Height" class="col-sm-3 control-label">Height* </label>
      <div class="col-sm-9">
        <input type="number" id="height" placeholder="Please write your height in centimetres" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <label for="weight" class="col-sm-3 control-label">Weight* </label>
      <div class="col-sm-9">
        <input type="number" id="weight" placeholder="Please write your weight in kilograms" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-3">Gender</label>
      <div class="col-sm-6">
        <div class="row">
          <div class="col-sm-4">
            <label class="radio-inline">
                                    <input type="radio" id="femaleRadio" value="Female">Female
                                </label>
          </div>
          <div class="col-sm-4">
            <label class="radio-inline">
                                    <input type="radio" id="maleRadio" value="Male">Male
                                </label>
          </div>
        </div>
      </div>
    </div>
    <!-- /.form-group -->
    <div class="form-group">
      <div class="col-sm-9 col-sm-offset-3">
        <span class="help-block">*required fields</span>
      </div>
    </div>
    <button type="submit" class="btn btn-primary btn-block mb-5">Register</button>
  </form>
  <!-- /form -->
</div>
<!-- ./container -->

<hr>

有什么主意吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）