将响应式侧边栏菜单引导到顶部导航栏

Question

所以我一直在寻找和寻找这方面的指导，但无济于事。

基本上，我只想有一个侧边栏，但是当屏幕变小，也就是智能手机的屏幕尺寸时，它就会变成导航栏。

我的侧边栏 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>
      <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>
      <li class="fuente-fjalla ul-personalizada">Blog</li>
      <br>
      <li class="fuente-fjalla ul-personalizada"><a href="acerca.html">Acerca</a></li>
      <li class="fuente-fjalla ul-personalizada">Contacto</li>
    </ul>
  </div>
</nav>

我的 CSS：

 #fixed-sidebar {
    position: fixed;
    max-width: 20%;
    color: white;
}

我不知道如何将其放入导航栏。我所知道的是如何从一开始就制作导航栏，但我不想要那个！我不想要任何花哨的动画叠加多色手风琴——不管是什么东西，拜托——

谢谢 ：）

原文由 dawn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

引导程序 5（2021 年更新）

Bootstrap 5 的一些分类有变化，但概念仍然相同。这是一个更新的 Bootstrap 5 侧边栏导航栏示例

Bootstrap 4（原始答案）

它可以在 Bootstrap 4 中使用响应式网格列来完成。一栏用于侧边栏，一栏用于主要内容。

Bootstrap 4 侧边栏切换到移动设备上的顶部导航栏

<div class="container-fluid h-100">
    <div class="row h-100">
        <aside class="col-12 col-md-2 p-0 bg-dark">
            <nav class="navbar navbar-expand navbar-dark bg-dark flex-md-column flex-row align-items-start">
                <div class="collapse navbar-collapse">
                    <ul class="flex-md-column flex-row navbar-nav w-100 justify-content-between">
                        <li class="nav-item">
                            <a class="nav-link pl-0" href="#">Link</a>
                        </li>
                        ..
                    </ul>
                </div>
            </nav>
        </aside>
        <main class="col">
            ..
        </main>
    </div>
</div>

顶部的备用侧边栏

将侧边栏固定到顶部

对于反向（ 成为侧边栏的顶部导航栏），可以像 这个例子 一样完成

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果出于任何原因这不是一个好的解决方案，请告诉我。它对我来说很好用。

我所做的是隐藏侧边栏，然后显示带 断点 的导航栏

@media screen and (max-width: 771px) {
    #fixed-sidebar {
        display: none;
    }
    #navbar-superior {
        display: block !important;
    }
}

原文由 dawn 发布，翻译遵循 CC BY-SA 4.0 许可协议