隐藏了下拉子项-Bootstrap 3

Question

I'm having issues with the bootstrap nav bar in a mobile view. As you can see via the image, the children are hidden when expanding the dropdown box. Is there a way to expand the menu so that they are no longer hidden?

Here is the mobile screenshot: Screenshot

Here is my navbar at the moment:(Sorry about the hidden names etc)

<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

Set the z-index of your dropdown menu to a value higher than the one of your pages body.

In your css do:

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