如何在Dreamweaver中将Bootstrap汉堡菜单拆分为两列？

我是一名新手，刚学Dreamweaver三天，正在通过手册和YouTube博主Jong-Yoon Kim的教程学习。现在需要做一个包含12个页面的网站菜单，但移动端汉堡菜单显示过长，严重挤压页面内容，想把它拆成各含6个菜单项的两列。

以下是添加菜单项后的完整代码：

<!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>

解决步骤 #

1. 调整菜单HTML结构 #

把原有单个<ul>拆分为两个，各包含6个菜单项，同时新增容器包裹，方便后续CSS控制：

<div class="collapse navbar-collapse" id="navbarSupportedContent1">
  <div class="mobile-menu-grid">
    <ul class="navbar-nav mr-auto menu-column">
      <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>
    </ul>
    <ul class="navbar-nav mr-auto menu-column">
      <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>
</div>

2. 添加移动端专属CSS #

在style.css中写入媒体查询，在移动端触发汉堡菜单时，让菜单以两列布局展示：

/* 匹配Bootstrap navbar-expand-lg的断点（小于992px时生效） */
@media (max-width: 991.98px) {
  .mobile-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列等宽 */
    gap: 15px; /* 两列之间的间距 */
    padding: 10px 0;
  }
  /* 可选：调整菜单项内边距，让菜单更紧凑 */
  .menu-column .nav-item {
    padding: 4px 0;
  }
}

3. 预览验证 #

保存修改后，在移动端打开页面，点击汉堡菜单即可看到12个菜单项分成两列展示，不会再过度挤压页面内容。

内容的提问来源于stack exchange，提问作者kiki