gpt4 book ai didi

html - Bootstrap 3 导航栏下拉菜单全高

转载 作者:行者123 更新时间:2023-11-28 02:39:39 27 4
gpt4 key购买 nike

我有一个带有下拉菜单的经典 Bootstrap 3 导航栏 (https://getbootstrap.com/examples/navbar/)。

我希望菜单下拉菜单具有屏幕高度。这可能吗?

最佳答案

为此示例提供 height 属性可能会有所帮助。应用于 drop-down 项的内联样式 css。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu" style="height:100vh;">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>

<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu for the "Page 1" button in the


navigation bar.</p>
</div>

</body>
</html>

关于html - Bootstrap 3 导航栏下拉菜单全高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45233553/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com