如何在小屏幕中将侧边栏转换为汉堡菜单

【问题标题】：How to convert sidebar to hamburger menu in small screens如何在小屏幕中将侧边栏转换为汉堡菜单
【发布时间】：2020-11-11 17:24:47
【问题描述】：

我有侧边菜单，当屏幕很小的移动尺寸时，我需要将其转换为汉堡菜单。

我认为<div class="collapse navbar-collapse" id="navbarSupportedContent"> 之间的所有内容都进入了汉堡包。 

<!Doctype html>
    <html lang="en">
       <head>
          <!-- Required meta tags -->
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
          <!-- Bootstrap CSS -->
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
          <title>Admin</title>
       </head>
       <body>
          <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
             <a class="navbar-brand" href="#">ADMIN PANEL</a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <!-- code here will be displayed in hamburger -->
             </div>
          </nav>
          <div class="container-fluid">
             <div class="row">
                <div class="col-3 ">
                   <ul class="list-group bg-primary ">
                      <li class="list-unstyled  border-0  p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 1 </a></li>
                      <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 2 </a></li>
                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 3 </a></li>
                      <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 4 </a></li>
                      <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 5 </a></li>
                      <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 6 </a></li>
                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 7 </a></li>
                   </ul>
                </div>
                <div class="col-9">
                   My Content
                </div>
             </div>
          </div>
          <!-- Optional JavaScript -->
          <!-- jQuery first, then Popper.js, then Bootstrap JS -->
          <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
       </body>
    </html>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4


【解决方案1】：

您可以使用引导程序utility display classes

这是解决您问题的方法。

 <!Doctype html>
        <html lang="en">
           <head>
              <!-- Required meta tags -->
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
              <!-- Bootstrap CSS -->
              <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
              <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
              <title>Admin</title>
           </head>
           <body>
              <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
                 <a class="navbar-brand" href="#">ADMIN PANEL</a>
                 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
                 </button>
                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="list-group bg-primary d-block d-sm-none">
                      <li class="list-unstyled  border-0  p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 1 </a></li>
                      <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 2 </a></li>
                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 3 </a></li>
                      <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 4 </a></li>
                      <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 5 </a></li>
                      <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 6 </a></li>
                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 7 </a></li>
                   </ul>
                 </div>
              </nav>
              <div class="container-fluid">
                 <div class="row">
                    <div class="col-3 d-none d-sm-block">
                       <ul class="list-group bg-primary ">
                          <li class="list-unstyled  border-0  p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 1 </a></li>
                          <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 2 </a></li>
                          <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 3 </a></li>
                          <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 4 </a></li>
                          <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 5 </a></li>
                          <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 6 </a></li>
                          <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 7 </a></li>
                       </ul>
                    </div>
                    <div class="col-9">
                       My Content
                    </div>
                 </div>
              </div>
              <!-- Optional JavaScript -->
              <!-- jQuery first, then Popper.js, then Bootstrap JS -->
              <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
              <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
           </body>
        </html>

【讨论】：

  • 先生，这行得通，但菜单左侧有一些填充，如何删除它？
  • 有填充设置为导航栏类。您可以使用实用程序类 link 将其删除，并为 navbar-brand 和 navbar-toggler 添加间距
  • 谢谢@Gergana，这很有帮助
【解决方案2】：

基于 Gergana 的解决方案，我进一步改进。
现在左侧栏是全屏的，没有填充，布局也有所改进。
也请投票 Gergana 解决方案，因为她为这个解决方案设置了里程碑。

<!Doctype html>
        <html lang="en">
           <head>
              <!-- Required meta tags -->
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
              <!-- Bootstrap CSS -->
              <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
              <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
              <title>Admin</title>
           </head>
           <body>

              <div class="container-fluid">
                  <div class="row">
                      <div class="col-3 d-none d-sm-block p-0 bg-secondary p-3 min-vh-100">
                          <h4 class="gray-3">Right bar</h4>
                          <ul class="list-group mt-4">
                              <li class="list-unstyled border-0 p-2"> <a href="" class="text-light">Product 1 </a></li>
                              <li class="list-unstyled border-0 p-2"> <a href="" class="text-light">Product 2 </a></li>
                              <li class="list-unstyled border-0 p-2"> <a href="" class="text-light">Product 3 </a></li>
                              <li class="list-unstyled border-0 p-2"> <a href="" class="text-light">Product 4 </a></li>
                              <li class="list-unstyled border-0 p-2"> <a href="" class="text-light">Product 5 </a></li>
                              <li class="list-unstyled border-0 p-2"> <a href="" class="text-light">Product 6 </a></li>
                              <li class="list-unstyled border-0 p-2"> <a href="" class="text-light">Product 7 </a></li>
                          </ul>
                      </div>
                      <div class="col-12 col-sm-9 p-0">
                          <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
                              <a class="navbar-brand" href="#">ADMIN PANEL</a>
                              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                  <span class="navbar-toggler-icon"></span>
                              </button>
                              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                                  <ul class="list-group bg-primary d-block d-sm-none">
                                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 1 </a></li>
                                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 2 </a></li>
                                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 3 </a></li>
                                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 4 </a></li>
                                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 5 </a></li>
                                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 6 </a></li>
                                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 7 </a></li>
                                  </ul>
                              </div>
                          </nav>
                          <main class="p-4">
                              My Content
                          </main>

                      </div>
                  </div>
              </div>
              <!-- Optional JavaScript -->
              <!-- jQuery first, then Popper.js, then Bootstrap JS -->
              <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
              <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
           </body>
        </html>

【讨论】：

    猜你喜欢
    • 2016-05-15
    • 1970-01-01
    • 1970-01-01
    • 2017-08-02
    • 1970-01-01
    • 1970-01-01
    • 2021-02-17
    • 2021-07-12
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode