Question

我在移动视图中遇到了bootstrap导航栏的问题。正如您可以通过图像看到的那样，在展开下拉框时隐藏了子项。有没有办法扩展菜单，以便不再隐藏它们？

以下是移动屏幕截图：Screenshot

此处是我的导航栏:(对于隐藏的名称等抱歉）

<nav class="navbar navbar-default" role="navigation">
              <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#"></a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  <ul class="nav nav-pills nav-justified">
                    <li class="active"><a href="index.html">1</a></li>
                    <li><a href="process.html">2</a></li>
                    <li class="dropdown">
                      <a href="2.html" class="dropdown-toggle navbar-collapse" data-toggle="dropdown">2 <span class="caret"></span></a>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="3.html">3</a></li>
                        <li><a href="4.html">4</a></li>
                        <li><a href="5.html">5</a></li>
                        <li><a href="6.html">6</a></li>
                        <li><a href="7.html">7</a></li>
                        <li><a href="8.html">8</a></li>
                        <li class="divider"></li>
                        <li><a href="8.html">8</a></li>
                      </ul>
                      <li><a href="contact.html">Contact Us</a></li>
                    </li>
                  </ul>
                </div><!-- /.navbar-collapse -->
              </div><!-- /.container-fluid -->
            </nav>

Answer 1

将下拉菜单的z-index设置为高于您网页正文的值。

在你的css中：

.drodown-menu{
    z-index:1000; //or whatever value you want to use
}

隐藏下拉儿童 - Bootstrap 3

1 个答案: