微信小程序

微信小程序

微信扫一扫

立即使用在线工具小程序

联系我，请见小程序

关闭

支付宝

红包

格式转换神器，微信搜索：“极速小工具” 小程序。

快速移出黑名单，请: 点击移出黑名单

您最近使用了：

打赏支持阿里云限量红包，点我领取腾讯云1折，点我领取

网站维护压力越来越大，还请朋友们支持一波，非常谢谢！！

bootstrap移动端时导航栏从左边滑出/弹出

发布时间：2023-03-05 01:39:06阅读：1172

bootstrap移动端时导航栏从左边滑出/弹出，直接复制以下代码看结果。

```html
<!doctype html>
<html lang="zh-CN">

<head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<title>导航栏从左边滑出</title>
</head>

<style>
    @media (max-width: 768px) {
    .navbar-collapse {
        position: absolute;
        top: 54px;
        left: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 50%;
    }
    .navbar-collapse.collapsing {
        height: auto;
        -webkit-transition: left 0.3s ease;
        -o-transition: left 0.3s ease;
        -moz-transition: left 0.3s ease;
        transition: left 0.3s ease;
        left: -100%;
    }
    .navbar-collapse.show {
        background-color: aqua;
        left: 0;
        -webkit-transition: left 0.3s ease-in;
        -o-transition: left 0.3s ease-in;
        -moz-transition: left 0.3s ease-in;
        transition: left 0.3s ease-in;
    }
}
</style>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse " id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled">Disabled</a>
            </li>
          </ul>
        </div>
      </nav>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
        crossorigin="anonymous"></script>

</body>

</html>
```

版权声明：本文为仲天原创文章，转载请附上原文出处链接和本声明。

本文链接：

今日推荐 ➢

1. 青春之城活力之都是哪个城市,你知道吗？ 2. Python获取当前时间日期，时间格式化以及常用的时间操作 3. 基于Go、Gin、Redis、Mysql、Vue、TS、Vite、ElementPlus开发的后台管理系统。 4. 对于谷歌认证测试（xTS），分享一下自己在工作中编写的一些脚本。 5. 推荐一个，Go输出彩色命令行，第三方库 6. 常用正则表达式大全，值得收藏。 7. 推荐一个在线json工具，可格式化、可压缩、可检查。 8. 2023年网站真的不挣钱了，千万别在个人网站投入太多时间和精力... 9. 安卓手机使用adb命令录制视频详细用法 10. 推荐一个golang日志库，配置简单又好用(原创)

我有一个小程序：极速小工具，请微信搜索。
免责声明：本站所发布的在线工具/软件仅限于合法合规使用，请勿用于违法用途，本站不承担任何责任，使用即代表你同意本声明！

共条评论

推荐工具

JSON在线工具

最好用的JSON在线编辑器，JSON转换为YAML，JSON转换为XML，JSON语法检查，关键字查询，在线JSON格式化，在线JSON压缩，JSON美化，JSON语法检查，JSON在线解析。

Linux命令大全

Linux命令对照表，命令查询，命令详细解释。在线工具。

在线音频提取

此工具可以将上传的mp4、avi、3gp、wmv等常见格式的视频中的音频以MP3格式提取出来，在线免费mp4转mp3，在线免费视频转音频，视频转音频，音频提取工具。

在线对比两个文本中的不同之处，并高亮显示不同之处，在线文本比对，文本差异化对比。

在线图片转文字

在线免费图片转文字，图片文字提取，ocr识别文字，图片识别文字。

在线音频音量增强/减弱

在线音频调整音量，音频文件音量增强器，音频文件音量减弱器，在线提高mp3/wav音量，提高音频音量。

在线音频剪切/裁剪

在线音频剪切/裁剪。上传音频文件或音乐文件，对音频做剪切并保存剪切后的文件，目前只支持MP3格式。

在线PDF提取文字

在线PDF提取文字，PDF转文字。上传PDF文件格式，输出txt文件格式。