所以我一直在寻找这方面的指导,但无济于事。
基本上,我只想有一个侧边栏,但是当屏幕变小时,也就是智能手机屏幕变小,它就会变成导航栏。
我的侧边栏 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;
}
我不知道如何将其放入导航栏中。我所知道的是如何从一开始就制作导航栏,但我不想那样做!我不想要任何花哨的动画叠加多色 Accordion 式的东西,拜托-
谢谢你:)
最佳答案
Bootstrap 5(2021 年更新)
有些类在 Bootstrap 5 中有所变化,但概念仍然相同。这是更新的 Bootstrap 5 sidebar to navbar example
Bootstrap 4(原始答案)
这可以在 Bootstrap 4 中使用响应式网格列来完成。一栏用于侧边栏,一栏用于主要内容。
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
对于相反的情况(顶部成为侧边栏的导航栏),可以像this example 那样完成。
关于css - Bootstrap 响应式侧边栏菜单到顶部导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48472771/