我创建了一个带有引导的基本站点。我使用的是引导导航栏,对于较小的设备有折叠选项。
我想增加“.collapped navbar collapped”的高度,以便在页面中占用更多空间。
我很乐意展示一个图片来更好地解决我的问题,但我还不允许在这里张贴图片。
所以当我在移动设备上查看导航栏时,当折叠的菜单关闭时,一切看起来都很好。当我点击3行图片打开菜单时,它只显示了大约1.5个导航页面按钮。有没有办法增加这个高度,这样即使打开的菜单超过了下面的jumbotron分区,我也可以看到所有的5页呢?

<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.navbar的高度为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;
    }
}

bootply Link
由于您需要特定屏幕大小的屏幕,因此可以使用:
.navbar-xs { min-height:58px; height: 58px; }

你应该看看这个,找到更多答案:Decrease the size of the navbar

关于javascript - 增加 bootstrap 折叠的菜单高度(打开时),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30764867/

10-16 14:17