Bootstrap下拉隐藏在较小的屏幕中

Question

JSfiddle

以上小提琴在常规屏幕尺寸下工作得很好。但是，如果我在较小的屏幕尺寸（尝试调整浏览器大小）中尝试它，则下拉菜单隐藏在菜单后面，而是提供滚动条。我该如何防止这种情况？如何在菜单栏外面使用drodown并在较小的屏幕中完全显示它？

已经尝试过：link1，link2

HTML

getClientProperty

Answer 1

overflow-y默认设置为auto，当您的内容过多时，会提供滚动条。

＆＃13;

＆＃13;

.navbar-collapse.in {
  overflow-y: visible !important; /* Avoid !important, used it here only for priority */
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div id="menu" class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle" aria-expanded="true" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
        <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="">TRILLSOFT</a>
    </div>
    <div id="bs-example-navbar-collapse-1" class="navbar-collapse collapse in" aria-expanded="true" style="">
      <ul class="nav nav-pills">
        <li class="active">
          <a href="#TAPL" data-toggle="tab" aria-expanded="true">TAPL</a>
        </li>
        <li class="">
          <a href="#productorderedit" data-toggle="tab" aria-expanded="false">productorderedit</a>
        </li>
      </ul>
      <div class="tab-content">
        <div id="TAPL" class="tab-pane fade active in">
          <li class="dropdown open">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true">
Project Orders
<span class="caret"></span>
</a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">Project Order Lookup</a>
              </li>
              <li>
                <a href="#">Project Order Lookup of my Active projects</a>
              </li>
            </ul>
          </li>
        </div>
        <div id="productorderedit" class="tab-pane fade">
          <li>
            <a href="#">Release</a>
          </li>
          <li>
            <a href="#">FSC Labels</a>
          </li>
          <li>
            <a href="#">Unrelease Selected Items</a>
          </li>
        </div>
      </div>
    </div>
    <ul class="nav nav-pills navbar-right">
      <li>
        <div>
          Logged in as dshah |
          <a href="/app_dev.php/logout"> Logout</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;