Html 增加引导折叠的高度“；流动电话；导航菜单？

我正在努力使移动设备折叠下拉导航增加高度。目前，它被困在约340像素，我需要它扩展，以适应菜单项被包含在倒塌的导航。我在谷歌上不知疲倦地搜索，在这里寻找答案，但它们似乎都没有产生影响，即使我使用！重要的

这是我所说的内容的截图，以避免任何混淆我在截图中添加的蓝色边框区域就是我所说的。这似乎是设置为一个静态的高度，我需要它扩展大约另一个50px-100px为这个特定的应用程序。我没有在这里显示代码，因为我希望看到更改默认高度的“最佳方法”，以供将来参考

谢谢你的帮助！ 编辑：我没有提交代码，因为现在它只是默认的引导导航代码，所以我认为我不需要引用它

下面是代码，我只是在这里使用一个简单的通用startbootstrap.com模板

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <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 page-scroll" href="#page-top">Start Bootstrap</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden">
                        <a class="page-scroll" href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">Services</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">Contact</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">Services</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">Contact</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">Services</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

切换导航

我还没有自定义CSS，因为这是我试图更改的第一件事，不知道在CSS中下拉导航应该编辑在哪里

---

如果看不到代码，很难说出是什么影响了高度。如果在菜单中添加更多的

，它是否会展开

如果没有，则可能会有一个静态高度或最大高度css属性应用于

。下拉菜单

编辑以改进：

它看起来像这些元素中的任何一个

<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul class="nav navbar-nav">

具有

高度

或

最大高度

和

溢出：自动

属性

检查这些铬元素，看看是否是这种情况。然后，设置高度：自动和/或调整

最大高度

属性以允许该元素的高度增加

您可以在自定义CSS文件中设置它们，它们将覆盖引导的样式。只需确保在引导CSS文件之后加载CSS文件

---

如果您可以发布一个链接，我可以查看它并提供进行更改所需的确切代码。

我的手机折叠下拉导航显示滚动条而不是展开以显示所有导航链接时也遇到了同样的问题。我的解决方案是隐藏滚动条，然后在

数据目标的底部添加像素

您应该能够使用以下方法隐藏滚动条：

.navbar-collapse.in {
    overflow: hidden;
}

然后，当为移动设备调整大小时，您可以通过向
数据目标
div添加填充来在底部添加所需的额外像素：

@media (max-width: 768px) {
  .navbar-ex1-collapse {
      padding-bottom: 50px;
  }
}

您希望您的下拉列表更大，对吗？您需要在一个完整的工作示例（HTML/CSS/JS）中发布您正在使用的代码@DianeDuquesne是的，出现的是一个滚动条，而不是下拉区域展开以显示数据。大约50px太短，要求移动设备上的用户在下拉菜单中滚动以查看最后一个菜单项。@vanburen我没有发布代码，因为我不知道该CSS属性从何处来扩展引导移动导航空间的下拉导航高度。我说的是当你在bootstrap中按下汉堡包按钮时出现的实际菜单链接。导航栏下方打开的div似乎在引导默认情况下有一个设置的高度，而不是一直扩展以显示导航链接，而用户无需滚动。也许这可以回答您的问题：添加代码和另一个图像以显示发生的情况的更好示例。