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

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 5（2021 年更新）

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

Bootstrap 4（原始答案）

它可以在 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>

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

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

Answer 2

大屏幕：

小屏（手机）

如果这是你想要的，这是代码https://plnkr.co/edit/PCCJb9f7f93HT4OubLmM?p=preview

CSS + HTML + JQUERY ：

 @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"; body { font-family: 'Poppins', sans-serif; background: #fafafa; } p { font-family: 'Poppins', sans-serif; font-size: 1.1em; font-weight: 300; line-height: 1.7em; color: #999; } a, a:hover, a:focus { color: inherit; text-decoration: none; transition: all 0.3s; } .navbar { padding: 15px 10px; background: #fff; border: none; border-radius: 0; margin-bottom: 40px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } .navbar-btn { box-shadow: none; outline: none !important; border: none; } .line { width: 100%; height: 1px; border-bottom: 1px dashed #ddd; margin: 40px 0; } /* --------------------------------------------------- SIDEBAR STYLE ----------------------------------------------------- */ #sidebar { width: 250px; position: fixed; top: 0; left: 0; height: 100vh; z-index: 999; background: #7386D5; color: #fff !important; transition: all 0.3s; } #sidebar.active { margin-left: -250px; } #sidebar .sidebar-header { padding: 20px; background: #6d7fcc; } #sidebar ul.components { padding: 20px 0; border-bottom: 1px solid #47748b; } #sidebar ul p { color: #fff; padding: 10px; } #sidebar ul li a { padding: 10px; font-size: 1.1em; display: block; color:white; } #sidebar ul li a:hover { color: #7386D5; background: #fff; } #sidebar ul li.active>a, a[aria-expanded="true"] { color: #fff; background: #6d7fcc; } a[data-toggle="collapse"] { position: relative; } a[aria-expanded="false"]::before, a[aria-expanded="true"]::before { content: '\\e259'; display: block; position: absolute; right: 20px; font-family: 'Glyphicons Halflings'; font-size: 0.6em; } a[aria-expanded="true"]::before { content: '\\e260'; } ul ul a { font-size: 0.9em !important; padding-left: 30px !important; background: #6d7fcc; } ul.CTAs { padding: 20px; } ul.CTAs a { text-align: center; font-size: 0.9em !important; display: block; border-radius: 5px; margin-bottom: 5px; } a.download { background: #fff; color: #7386D5; } a.article, a.article:hover { background: #6d7fcc !important; color: #fff !important; } /* --------------------------------------------------- CONTENT STYLE ----------------------------------------------------- */ #content { width: calc(100% - 250px); padding: 40px; min-height: 100vh; transition: all 0.3s; position: absolute; top: 0; right: 0; } #content.active { width: 100%; } /* --------------------------------------------------- MEDIAQUERIES ----------------------------------------------------- */ @media (max-width: 768px) { #sidebar { margin-left: -250px; } #sidebar.active { margin-left: 0; } #content { width: 100%; } #content.active { width: calc(100% - 250px); } #sidebarCollapse span { display: none; } }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Collapsible sidebar using Bootstrap 3</title> <!-- Bootstrap CSS CDN --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- Our Custom CSS --> <link rel="stylesheet" href="style2.css"> <!-- Scrollbar Custom CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css"> </head> <body> <div class="wrapper"> <!-- Sidebar Holder --> <nav id="sidebar"> <div class="sidebar-header"> <h3>Header as you want </h3> </h3> </div> <ul class="list-unstyled components"> <p>Dummy Heading</p> <li class="active"> <a href="#menu">Animación</a> </li> <li> <a href="#menu">Ilustración</a> </li> <li> <a href="#menu">Interacción</a> </li> <li> <a href="#">Blog</a> </li> <li> <a href="#">Acerca</a> </li> <li> <a href="#">contacto</a> </li> </ul> </nav> <!-- Page Content Holder --> <div id="content"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn"> <i class="glyphicon glyphicon-align-left"></i> <span>Toggle Sidebar</span> </button> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Page</a></li> </ul> </div> </div> </nav> </div> </div> <!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <!-- Bootstrap Js CDN --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- jQuery Custom Scroller CDN --> <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#sidebarCollapse').on('click', function() { $('#sidebar, #content').toggleClass('active'); $('.collapse.in').toggleClass('in'); $('a[aria-expanded=true]').attr('aria-expanded', 'false'); }); }); </script> </body> </html>

如果这是你想要的。

Answer 3

您也可以使用像pushy这样的菜单/侧边栏： https ： //chrisyee.ca/pushy/

Answer 4

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

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

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