引导4：响应边栏菜单顶部导航栏 [英] Bootstrap 4: responsive sidebar menu to top navbar

问题描述

因此，我一直在寻找和寻找指导，没有用。

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

我的侧边栏HTML代码是这样的：

 < nav class =col-sm-3> 
< div class =col-sm-12id =fixed-sidebar> 
 <！ -   - < a href =index.html>< img id =home-logosrc =../ media / logo-prueba.jpgalt =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>博客< / li> 
< br> 
< li class =fuente-fjalla ul-personalizada>< a href =acerca.html> Acerca< / a>< / li> 
< li class =fuente-fjalla ul-personalizada>联络< / li> 
< / ul> 
< / div> 
< / nav> 
  

我的CSS：

 ＃fixed-sidebar {
 position：fixed; 
最大宽度：20％; 
颜色：白色; 
} 
  

我不知道如何将其导入导航栏。我所知道的是如何从开始制作导航栏，但我不想那么做！

谢谢:)

div class =h2_lin>解决方案

如果由于任何原因，这不是一个好的解决方案，请让我知道。它为我工作得很好。

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

  @media screen and（max-width：771px）{
＃fixed-sidebar {
 display：none; 
} 
＃navbar-superior {
 display：block！important; 
} 
} 
  

So I've been searching and searching for guidance in this with no avail.

Basically, I just want to have a sidebar, but when the screen gets small, aka smartphones screen size, it transforms into a navbar.

My HTML code for the sidebar is this:

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

My CSS:

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

I have no idea how to get that into a navbar. All I know is how to make the navbar from start, but I don't want that! I don't want any of that fancy animated-overlay-multicolor-accordion-whatever things, please-

Thank you :)

解决方案

If this isn't a good solution for any reason, please let me know. It worked fine for me.

What I did is to hide the Sidebar and then make appear the navbar with breakpoints

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

这篇关于引导4：响应边栏菜单顶部导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！