小编dhr*_*ruv的帖子

如何在小屏幕上将补充工具栏转换为汉堡菜单

当屏幕为小型手机尺寸时,我需要将其转换为汉堡菜单的侧边菜单。

我认为之间的所有内容<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">
          <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 …
Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap bootstrap-4

0
推荐指数
1
解决办法
328
查看次数

标签 统计

bootstrap-4 ×1

css ×1

html ×1

twitter-bootstrap ×1