我已经使用 bootstrap 创建了一个基本站点。我正在使用 Bootstrap 导航栏,为较小的设备提供折叠选项。
我想增加“.collapsed navbar-collapsed”的高度,以便在页面中占用更多空间。
我很乐意展示一张图片来更好地说明我的问题,但我还不允许在此处发布图片。
当我在移动设备上查看导航栏时,折叠菜单关闭时一切看起来都很棒。当我点击 3 行图像打开菜单时,它只显示大约 1 个半导航页面按钮。有没有办法增加这个高度,以便我可以看到那里的所有 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 个页面。
最佳答案
默认的 bootstrap 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/