Question

我花了最后一天试图弄清楚为什么当视口改变时，导航栏中的下拉菜单不起作用。

如果通过电话（或开发人员工具）查看该通用示例并将方向旋转为横向，则会看到下拉列表上的链接不可用。

我试图将滚动添加到.dropdown并产生溢出：scroll！important没有成功。我还尝试将其固定定位在顶部，但没有用。

我希望得到的结果是，如果菜单扩展到视图上方，则可以滚动屏幕（甚至下拉菜单本身）以查看其他链接。

请注意，当我从导航中删除“ fixed-top”类时，它都可以按预期工作，因此我想这是可以解决的。

代码：

html = """<h3>Stage I cancers</h3><p>If you only have one small tumor in your lung and there is no evidence of cancer in lymph nodes or elsewhere, your doctors may recommend <a href='/cancer/small-cell-lung-cancer/treating/surgery.html'>surgery</a> to remove the tumor and the nearby lymph nodes.</p><p>People who aren’t healthy enough for chemoradiation are usually treated with chemo by itself. This may be followed by radiation to the chest.</p><h3>Other limited stage cancers</h3><p>For most people with limited stage SCLC, surgery is not an option because the tumor is too large, it’s in a place that can’t be removed easily, or it has spread to nearby lymph nodes or other places in the lung. If you are in good health, the standard treatment is <a href='/cancer/small-cell-lung-cancer/treating/chemotherapy.html'>"""


soup = BeautifulSoup(html, 'html.parser')
find = soup.find_all('h3')
for h3 in find:
    print(h3.text)

Answer 1

var fixed = document.getElementById('fixed');

fixed.addEventListener('touchmove', function(e) {

  e.preventDefault();

}, false);

.dropdown-menu {
  max-height: 70vh;
  overflow-y: auto;
}

@media (max-width: 990px) {
  .navbar.fixed-top {
    overflow-y: auto;
    max-height: 100vh;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.5/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<nav id="#fixed" class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <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="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown
                        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
<main>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
</main>

使用CSS设置导航栏的最大高度：

@media (max-width: 990px){
  .navbar.fixed-top{
    overflow-y: auto;
    max-height: 100vh;
  }   
}

导航栏固定顶部内的Bootstrap 4下拉问题

1 个答案: