增加Bootstrap的高度折叠的“移动”导航菜单？ [英] Increasing the height of the Bootstrap Collapsed "mobile" navigation menu?

问题描述

我正在努力让移动折叠下拉导航增加高度。目前它停留在大约340px，我需要它扩展以适应折叠导航中包含的菜单项。我在Google上不知疲倦地搜索，在这里找到了答案，但即使在我使用！重要的时候，它们也没有一个能够产生影响。

下面是我正在讨论的一个屏幕截图，以避免混淆。 我添加到截图中的蓝色边框区就是我正在谈论的内容。这似乎设置为一个静态高度，我需要它为这个特定的应用程序扩展约50px-100px。我没有在这里显示代码，因为我希望看到最好的方法来改变我未来参考的默认高度。

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

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

 < nav class =navbar navbar-default navbar-fixed-toprole =navigation> 
< div class =container> 
< div class =navbar-header page-scroll> 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-ex1-collapse> 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a class =navbar-brand page-scrollhref =＃page-top>启动引导程序< / a> 
< / div> 
 
 <！ - 收集导航链接，表单和其他内容以进行切换 - > 
< div class =collapse navbar-collapse navbar-ex1-collapse> 
< ul class =nav navbar-nav> 
 <！ - 隐藏的li包含在滚动过去关于节的时候从关于链接移除活动类 - > 
< li class =hidden> 
< a class =page-scrollhref =＃page-top>< / a> 
< / li> 
< li> 
< a class =page-scrollhref =＃about>关于< / a> 
< / li> 
< li> 
< a class =page-scrollhref =＃services>服务< / a> 
< / li> 
< li> 
< a class =page-scrollhref =＃contact>联系人< / a> 
< / li> 
< li> 
< a class =page-scrollhref =＃about>关于< / a> 
< / li> 
< li> 
< a class =page-scrollhref =＃services>服务< / a> 
< / li> 
< li> 
< a class =page-scrollhref =＃contact>联系人< / a> 
< / li> 
< li> 
< a class =page-scrollhref =＃about>关于< / a> 
< / li> 
< li> 
< a class =page-scrollhref =＃services>服务< / a> 
< / li> 
< li> 
< a class =page-scrollhref =＃contact>联系人< / a> 
< / li> 
< / ul> 
< / div> 
<！ -  /.navbar-collapse  - > 
< / div> 
<！ -  /.container  - > 
< / nav> 
  

我没有自定义CSS，因为这是我尝试更改的第一件事，知道在CSS中应该编辑下拉导航的位置。

解决方案

我的移动折叠式下拉导航显示滚动条，而不是展开显示所有导航链接，导致同样的问题。我的解决方案是隐藏滚动条，然后将像素添加到我的数据目标 div的底部。

您应该可以隐藏滚动条：

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

然后，您可以在底部添加所需的额外像素

  @media（ data-target  div） max-width：768px）{
 .navbar-ex1-collapse {
 padding-bottom：50px; 
} 
} 
  

I am struggling to get the mobile collapsed drop down nav to increase in height. Currently it is stuck at about 340px and I need it to expand to fit the menu items being contained within the collapsed nav. I have searched tirelessly on Google and here to find an answer but none of them seem to make an impact, even when I use !important.

Here's a screenshot of what I am talking about to avoid any confusion. The blue bordered area that I added to the screenshot is what I am talking about. This seems to be set to a static height and I need it to extend about another 50px-100px for this particular application. I did not show code here because I am hoping to just see the "best way" to change the default height for my future reference.

Thanks for the help! EDIT: I did not submit code because right now it's just the default bootstrap nav code so I didn't think I needed to reference it.

Here's the code, I am just using a simple generic startbootstrap.com template here.

<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>

I have no custom CSS yet as this is the first thing I am trying to change and don't know where in the CSS the dropdown nav should be edited.

解决方案

I had the same problem with my mobile collapsed drop-down navigation displaying a scrollbar rather than expanding to show all the navigation links. My solution was to hide the scrollbar then add pixels to the bottom of my data-target div.

You should be able to hide the scrollbar using:

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

Then you can add the extra pixels needed at the bottom by adding padding to the data-target div when sized for mobile devices:

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

这篇关于增加Bootstrap的高度折叠的“移动”导航菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！