使用Bootstrap创建的顶部导航不会折叠子菜单

是因为没有正确配置导航栏的响应式属性。Bootstrap提供了响应式导航栏组件，可以在小屏幕设备上自动折叠子菜单，以提供更好的用户体验。

要解决这个问题，可以按照以下步骤进行操作：

1. 确保正确引入Bootstrap的CSS和JavaScript文件。可以通过CDN链接或本地文件引入。
2. 在导航栏的HTML结构中，添加一个按钮元素，用于在小屏幕设备上触发折叠子菜单的动作。按钮元素的class属性应设置为navbar-toggler。
3. 在按钮元素内部添加一个用于显示菜单折叠状态的图标，可以使用Bootstrap提供的图标字体或自定义图标。
4. 在导航栏的菜单列表外部添加一个collapse类的div元素，用于包裹子菜单。该div元素的id属性应与按钮元素的data-target属性相对应，以建立二者之间的关联。
5. 在菜单列表的父级元素上添加navbar-expand类，以指定导航栏在小屏幕设备上展开。

下面是一个示例代码：

<nav class="navbar navbar-expand">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">菜单项1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">菜单项2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">菜单项3</a>
      </li>
    </ul>
  </div>
</nav>

在这个示例中，导航栏会在小屏幕设备上自动折叠子菜单，并通过点击按钮展开或折叠子菜单。

推荐的腾讯云相关产品：腾讯云服务器（CVM）和腾讯云负载均衡（CLB）。腾讯云服务器提供可靠的计算能力，适用于各种应用场景；腾讯云负载均衡可以将流量分发到多台云服务器上，提高系统的可用性和性能。

腾讯云服务器（CVM）产品介绍链接：https://cloud.tencent.com/product/cvm

腾讯云负载均衡（CLB）产品介绍链接：https://cloud.tencent.com/product/clb