Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/395.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 增加引导折叠菜单高度(打开时)_Javascript_Html_Css_Twitter Bootstrap - Fatal编程技术网

Javascript 增加引导折叠菜单高度(打开时)

Javascript 增加引导折叠菜单高度(打开时),javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我已经用引导创建了一个基本站点。我使用的是引导导航栏,较小的设备有折叠选项 我想增加“.collapsed navbar collapsed”的高度,以便在页面中占用更多空间 我很乐意展示一张图片来更好地解决我的问题,但我还不允许在这里发布图片 因此,当我在移动设备上查看导航栏时,当折叠菜单关闭时,一切看起来都很棒。当我点击3行图像打开菜单时,它只显示1个半导航页面按钮。有没有办法增加这个高度,这样我就可以看到我所有的5页,即使打开的菜单超过了它下面的jumbotron分区 <nav cl

我已经用引导创建了一个基本站点。我使用的是引导导航栏,较小的设备有折叠选项

我想增加“.collapsed navbar collapsed”的高度,以便在页面中占用更多空间

我很乐意展示一张图片来更好地解决我的问题,但我还不允许在这里发布图片

因此,当我在移动设备上查看导航栏时,当折叠菜单关闭时,一切看起来都很棒。当我点击3行图像打开菜单时,它只显示1个半导航页面按钮。有没有办法增加这个高度,这样我就可以看到我所有的5页,即使打开的菜单超过了它下面的jumbotron分区

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html" style="font-size:      30px;">Mark Wuerch</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="aboutme.html">About Me</a></li>
        <li><a href="philo.html">Philosophy</a></li>
        <li><a href="cv.html">My CV</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">My Projects
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">School Project on Disabled Learners</a></li>
            <li><a href="#">Building a better school one book at a time</a></li>
            <li><a href="#">Working with ESL Students</a></li>
          </ul>
      </ul>
    </div>
  </div>
</nav>


请参阅关于我/家的部分。如何使整个区域变大,以便在单击“展开”按钮时可以看到所有5个页面。

默认引导css
。导航栏的高度为50px,因此您需要覆盖它以增加导航栏

.navbar {min-height:80px !important}
如您所说,要增加内部元素,您必须使用媒体查询:

@media (max-width: 767px) {
    .navbar-nav > li > a {
        line-height: 90px;/*changing this particular line does a lot, this is where the increase and decrease are done */
        padding-top: 10px;
        padding-bottom: 10px;
        height: auto !important;
        overflow: visible !important;
    }
}
由于特定屏幕大小需要它,您可以使用:

.navbar-xs { min-height:58px; height: 58px; }

你应该看看这个,只是找到了更多的答案:

请添加代码,这样我们就可以提供帮助。编辑代码-抱歉,为了让它更容易理解,请不要添加照片。你不必邀请他人进行更正。在这个网站上,无论你是否要求,你都会得到纠正。不过,你可以随时使用链接回滚,并且(希望更频繁地)调查你的帖子是如何改进的(提示:也许你可以从中学习)。谢谢你的帮助。然而,我仍然有问题,试图使倒塌部分的高度更大。您的解决方案帮助我使导航栏(未折叠时)总体上更大。我还添加了一个图像,使其更易于理解。。。终于有了足够多的重复答案@AaronWuerchHi,是的,把信息放在@media部分确实有帮助。虽然它仍然不会增加可视框的高度,但只会在页面链接和菜单页面所在的div之间填充。