Bootstrap 4:响应侧边栏菜单到顶部导航栏

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;
}

我不知道如何将其导入导航栏.我所知道的是如何从头开始制作导航栏,但我不希望这样!我不想要任何那种花哨的动画叠加多色手风琴 - 无论如何,请 -

谢谢 :)

Answer 1

它可以使用响应网格列在Bootstrap 4中完成.侧栏有一列,主要内容有一列.

Bootstrap 4 Sidebar切换到移动设备上的Top Navbar

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

备用侧边栏到顶部
固定侧边栏到顶部

对于反向(成为侧边栏的 Top Navbar),可以像这个例子一样完成