![响应侧边栏菜单到顶部导航栏]( "响应侧边栏菜单到顶部导航栏")
本文介绍了Bootstrap 响应侧边栏菜单到顶部导航栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我一直在寻找这方面的指导，但无济于事.
基本上，我只想有一个侧边栏，但是当屏幕变小(即智能手机屏幕尺寸)时，它会变成导航栏.
我的侧边栏 HTML 代码是这样的:
<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">博客</li><br><li class="fuente-fjalla ul-personalizada"><a href="acerca.html">Acerca</a></li><li class="fuente-fjalla ul-personalizada">联系方式</li>
</nav>
我的 CSS:
#fixed-sidebar {位置:固定；最大宽度:20%；白颜色;}
我不知道如何将其放入导航栏.我所知道的是如何从一开始就制作导航栏，但我不想那样做！我不想要任何那种花哨的动画叠加多色手风琴-无论如何，拜托-
谢谢:)
解决方案
Bootstrap 5(2021 年更新)
Bootstrap 5 的一些分类有所变化，但概念仍然相同.这是更新的 Bootstrap 5 侧边栏到导航栏示例
引导程序 4(原始答案)
可以在 Bootstrap 4 中使用响应式网格列来完成.一栏是侧边栏，一栏是主要内容.
Bootstrap 4 侧边栏切换到顶部导航栏 在移动设备上
<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=#">链接</a>..
</nav></一边><主类=col">..</main>
备用侧边栏到顶部
将侧边栏固定到顶部
相反(顶部 导航栏变成侧边栏)，可以像 这个例子
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 :)
解决方案
Bootstrap 5 (update 2021)
Some of the classed have change for Bootstrap 5, but the concept is still the same. Here's an updated Bootstrap 5 sidebar to navbar example
Bootstrap 4 (original answer)
It could be done in Bootstrap 4 using the responsive grid columns. One column for the sidebar and one for the main content.
Bootstrap 4 Sidebar switch to Top Navbar on mobile
<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>
Alternate sidebar to top
Fixed sidebar to top
For the reverse (Top Navbar that becomes a Sidebar), can be done like this example
这篇关于Bootstrap 响应侧边栏菜单到顶部导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！