我是新手，也是婴儿潮一代。我正在通过手册和youtube视频学习Dreamweaver，这是我的第三天。也许有一种简单的方法可以做到这一点，但我想不出来，而且搜索答案也一无所获。我想创建一个网站菜单与12页。显然，对于移动用户来说，这对于汉堡包菜单来说太长了。我想把菜单分成两列，每列6页。
我正在使用一个名叫Jong-Yoon Kim的youtuber的教程。他是一位优秀的教练，我从他身上学到了很多东西。下面是他让我们为菜单准备的代码，但我添加了额外的页面(我未来的网站将有12页)。正如你在移动预览中看到的，它太长了，把页面的内容往下推了很远。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.4.1.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Volunteer</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Adopt</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
<!-- body code goes here -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
</body>
</html>
如果可能的话，我标记了我想做的事情的屏幕截图。手机汉堡菜单截图
试试这个
<ul class="navbar-nav mr-auto">
<div class="row">
<div class="col-md-6">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Volunteer</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Adopt</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
</div>
<div class="col-md-6">
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
</div>
</div>
</ul>