如何将现有Bootstrap侧边栏菜单适配为小屏顶部Navbar？

嘿，我完全懂你不想从头搭建新导航栏的想法，咱们直接基于你现有的代码改造就行，全程不用复杂动画或额外组件！

步骤1：微调HTML结构 #

先给列表加个类名方便控制，同时给换行标签加类（方便小屏隐藏）：

<nav class="col-sm-3 ">
  <div class="col-sm-12" id="fixed-sidebar">
    <!-- <a href="index.html"><img id="home-logo" src="../media/logo-prueba.jpg" alt="Logo de Animanoir"></a> -->
    <ul class="sidebar-nav">
      <li class="fuente-fjalla ul-personalizada">Animación</li>
      <li class="fuente-fjalla ul-personalizada">Ilustración</li>
      <li class="fuente-fjalla ul-personalizada">Interacción</li>
      <br class="sidebar-break">
      <li class="fuente-fjalla ul-personalizada">Blog</li>
      <br class="sidebar-break">
      <li class="fuente-fjalla ul-personalizada"><a href="acerca.html">Acerca</a></li>
      <li class="fuente-fjalla ul-personalizada">Contacto</li>
    </ul>
  </div>
</nav>

步骤2：添加响应式CSS（媒体查询） #

保留你原来的侧边栏样式，再加上小屏设备的适配规则：

/* 桌面端原有的固定侧边栏样式 */
#fixed-sidebar {
  position: fixed;
  max-width: 20%;
  color: white;
}

/* 小屏设备（宽度≤767px，对应Bootstrap的sm断点） */
@media (max-width: 767px) {
  /* 取消固定定位，让导航栏占满屏幕宽度 */
  #fixed-sidebar {
    position: static;
    max-width: 100%;
    width: 100%;
  }

  /* 把列表改成横向排列 */
  .sidebar-nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 1.5rem; /* 导航项之间的间距，可根据需求调整 */
    flex-wrap: wrap; /* 如果导航项太多，自动换行避免溢出 */
  }

  /* 隐藏小屏里的换行符 */
  .sidebar-break {
    display: none;
  }

  /* 保持原有文字样式，去掉不必要的边距 */
  .sidebar-nav li {
    margin: 0;
  }
}

效果说明 #

• 桌面端：完全保留你原来的固定侧边栏样式，没有任何变化
• 手机/小屏设备：侧边栏自动转为顶部横向导航，所有选项横向排列，多余选项会自动换行，完全复用了你原来的导航项和样式

这样就不用重新写新的导航栏代码，直接在现有基础上实现了响应式转换，完全符合你的需求～

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