bootstrap5 offcanvas-navbar手机滑动导航,左右滚动导航
taotaoit Bootstrap5 2021-09-02 65 0
关于本站

本人承接php网站维护,病毒查杀,网站编辑,网站改版,html制作

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

1695812 1607 17
最新评论
报错 in promise) MiniProgramError {"errMsg":"removeTabBarBadge:fail not TabBar page"} Object
评 人人商城小程序昵称变成了“微信用户”头像也不显示?getUserInfo换成getUserProfile
按照这个修改后报错: ReferenceError: n is not defined at success (index.js? [sm]:3) at Function.forEach.u.<computed> (VM10210 WAService.js:2) at :55237/appservice/<api login success callback function> at Object.success (VM10210 WAService.js:2) at r (VM10210 WAService.js:2) at VM10210 WAService.js:2 at w (VM10210 WAService.js:2) at VM10210 WAService.js:2 at VM15 asdebug.js:1 at I (VM15 asdebug.js:1)(env: Windows,mp,1.05.2105170; lib: 2.17.0)
评 人人商城小程序昵称变成了“微信用户”头像也不显示?getUserInfo换成getUserProfile
asfdsafasdf
评 ;!function(){}();
:kaixin:
评 thinkphp 3.2.3 Runtime\Logs日志文件太多怎么关闭日志功能
其他浏览器呢
评 对服务器的请求已遭到某个扩展程序的阻止
文章标签更多
ThinkPHP (163)
Mysql (35)
DedeCms (33)
jQuery (41)
证件照 (1)
setInc (3)
setDec (3)
onclick (4)
打开边栏(ESC) 关闭边栏(ESC)

效果图

from clipboard

示例链接

https://taotaoit.com/demo/?url=other/other-119/index

直接上代码

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.82.0">
    <title>Offcanvas navbar template · Bootstrap v5.0</title>
<!-- Bootstrap 的 CSS 文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- 选项 1:包含 Popper 的 Bootstrap 集成包 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    
    <!-- Custom styles for this template -->
    <link href="offcanvas.css" rel="stylesheet">
  </head>
  <body style="height: 500px; background-color: aquamarine;">    

  <div class="nav-scroller bg-body shadow-sm">
    <nav class="nav nav-underline" aria-label="Secondary navigation">
      <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
      <a class="nav-link" href="#">
        Friends
        <span class="badge bg-light text-dark rounded-pill align-text-bottom">27</span>
      </a>
      <a class="nav-link" href="#">Explore</a>
      <a class="nav-link" href="#">Suggestions</a>
      <a class="nav-link" href="#">Link</a>
      <a class="nav-link" href="#">Link</a>
      <a class="nav-link" href="#">Link</a>
      <a class="nav-link" href="#">Link</a>
      <a class="nav-link" href="#">Link</a>
      <a class="nav-link" href="#">Explore</a>
      <a class="nav-link" href="#">Suggestions</a>
      <a class="nav-link" href="#">Link</a>
      <a class="nav-link" href="#">Link</a>
      <a class="nav-link" href="#">Link</a>
      <a class="nav-link" href="#">Link</a>
      <a class="nav-link" href="#">Link</a>
      <a class="nav-link" href="#">Explore</a>
      <a class="nav-link" href="#">Suggestions</a>
    </nav>
  </div>
  </body>
</html>
offcanvas.css
html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}

body {
  padding-top: 56px;
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-underline .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
  color: #6c757d;
}

.nav-underline .nav-link:hover {
  color: #007bff;
}

.nav-underline .active {
  font-weight: 500;
  color: #343a40;
} 

版权声明:本站原创文章,允许自由转载。

相关推荐
bootstrap5 .me-auto .ms-auto .mx-auto和bootstrap4 .ml-auto .mr-auto
Bootstrap5 | 2021-08-04 146
bootstrap5 .me-auto .ms-auto是什么意思? 先看css样式 bootstrap5 .ms-auto元素居右 .me-auto元素居左 .ms-auto{margin-left:auto!important} .me-auto{margin-right:auto!important} .m...
bootstrap5 .mt-auto .mb-auto .my-auto
Bootstrap5 | 2021-08-04 109
css样式 .mt-auto{margin-top:auto!important} .mb-auto{margin-bottom:auto!important} .my-auto{margin-top:auto!important;margin-bottom:auto!important}
评论:0条
评论加载中...
发表评论