Bootstart4导航wap端不收缩,左右推动支持手机端兼容ios/android;效果出来,具体参数自己再加已修成成自己想要的效果。
CSS:
@media (max-width:1023px){ body{padding-top: 124px;} .navbar-brand{padding-bottom: 0px;} .qim_navbar{padding-right:.5rem;padding-left:.5rem} .qim_navbar .navbar-nav-scroll { max-width: 100%; overflow-x: auto; height: 2.5rem; margin-top: .25rem; font-size: .875rem; } .navbar-nav-scroll .navbar-nav .dropdown-menu{ position: fixed; top: 83px; background-color: #ffba00; padding-bottom:20px; } .navbar-nav-scroll .navbar-nav{ padding-bottom: 0rem; white-space: nowrap; width: 100%; -webkit-overflow-scrolling: touch; } .navbar-nav-scroll .navbar-nav .nav-link{height: 38px;} .navbar-nav-scroll .navbar-nav li{height: 38px;} }
HTML:
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row qim_navbar fixed-top"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-2 ml-2" href="https://www.oksucai.com/"><img src="/statics/img/logo.png" class="img-fluid" alt="好素材"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-nav-scroll"> <ul class="navbar-nav bd-navbar-nav flex-row qim_top_nav"> <li class="nav-item "> <a class="nav-link" href="https://www.oksucai.com/">首页</a></li> <!--网站特效--> <li class="nav-item dropdown active"> <a href="https://www.oksucai.com/index.php?a=lists&catid=1" class="nav-link dropdown-toggle" title="" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">网站特效 <b class="caret"></b></a> <div class="dropdown-menu" aria-labelledby="dropdown1"> <a class="dropdown-item " href="https://www.oksucai.com/index.php?a=lists&catid=9" title="幻灯片">幻灯片</a><a class="dropdown-item noborder" href="https://www.oksucai.com/index.php?a=lists&catid=10" title="相册效果">相册效果</a><a class="dropdown-item " href="https://www.oksucai.com/index.php?a=lists&catid=11" title="图片特效">图片特效</a><a class="dropdown-item noborder" href="https://www.oksucai.com/index.php?a=lists&catid=12" title="导航菜单">导航菜单</a><a class="dropdown-item " href="https://www.oksucai.com/index.php?a=lists&catid=13" title="HTML5+Css">HTML5+Css</a><a class="dropdown-item noborder" href="https://www.oksucai.com/index.php?a=lists&catid=14" title="表单按钮">表单按钮</a><a class="dropdown-item " href="https://www.oksucai.com/index.php?a=lists&catid=15" title="漂浮代码">漂浮代码</a> </div> </li> <!--开发教程--> <li class="nav-item dropdown "> <a href="https://www.oksucai.com/index.php?a=lists&catid=2" class="nav-link dropdown-toggle" title="" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">开发教程 <b class="caret"></b></a> <div class="dropdown-menu" aria-labelledby="dropdown2"> <a class="dropdown-item " href="https://www.oksucai.com/index.php?a=lists&catid=16" title="PHP">PHP</a><a class="dropdown-item noborder" href="https://www.oksucai.com/index.php?a=lists&catid=17" title="ThinkPHP">ThinkPHP</a><a class="dropdown-item " href="https://www.oksucai.com/index.php?a=lists&catid=18" title="JavaScript ">JavaScript </a><a class="dropdown-item noborder" href="https://www.oksucai.com/index.php?a=lists&catid=19" title="Css">Css</a><a class="dropdown-item " href="https://www.oksucai.com/index.php?a=lists&catid=20" title="HTML5">HTML5</a> </div> </li> <!--图片素材--> <li class="nav-item dropdown "> <a href="https://www.oksucai.com/index.php?a=lists&catid=3" class="nav-link dropdown-toggle" title="" id="dropdown3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">图片素材 <b class="caret"></b></a> <div class="dropdown-menu" aria-labelledby="dropdown3"> <a class="dropdown-item " href="https://www.oksucai.com/index.php?a=lists&catid=21" title="设计欣赏">设计欣赏</a><a class="dropdown-item noborder" href="https://www.oksucai.com/index.php?a=lists&catid=22" title="网页图标">网页图标</a> </div> </li> <!--资源--> <li class="nav-item dropdown "> <a href="https://www.oksucai.com/index.php?a=lists&catid=4" class="nav-link dropdown-toggle" title="" id="dropdown4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">资源 <b class="caret"></b></a> <div class="dropdown-menu" aria-labelledby="dropdown4"> <a class="dropdown-item " href="https://www.oksucai.com/index.php?a=lists&catid=23" title="软件">软件</a><a class="dropdown-item noborder" href="https://www.oksucai.com/index.php?a=lists&catid=24" title="插件">插件</a><a class="dropdown-item " href="https://www.oksucai.com/index.php?a=lists&catid=25" title="字体">字体</a> </div> </li> <!--模板--> <li class="nav-item dropdown "> <a href="https://www.oksucai.com/index.php?a=lists&catid=5" class="nav-link dropdown-toggle" title="" id="dropdown5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">模板 <b class="caret"></b></a> <div class="dropdown-menu" aria-labelledby="dropdown5"> <a class="dropdown-item " href="https://www.oksucai.com/index.php?a=lists&catid=26" title="WordPress模板">WordPress模板</a><a class="dropdown-item noborder" href="https://www.oksucai.com/index.php?a=lists&catid=27" title="后台模板">后台模板</a><a class="dropdown-item " href="https://www.oksucai.com/index.php?a=lists&catid=28" title="会员中心">会员中心</a> </div> </li> <!--UI框架--> <li class="nav-item dropdown "> <a href="https://www.oksucai.com/index.php?a=lists&catid=6" class="nav-link dropdown-toggle" title="" id="dropdown6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">UI框架 <b class="caret"></b></a> <div class="dropdown-menu" aria-labelledby="dropdown6"> <a class="dropdown-item " href="https://www.oksucai.com/index.php?a=lists&catid=29" title="Bootstart">Bootstart</a> </div> </li> <!--QimCMS--> <li class="nav-item dropdown "> <a href="https://www.oksucai.com/index.php?a=lists&catid=7" class="nav-link dropdown-toggle" title="" id="dropdown7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">QimCMS <b class="caret"></b></a> <div class="dropdown-menu" aria-labelledby="dropdown7"> <a class="dropdown-item " href="https://www.oksucai.com/index.php?a=lists&catid=30" title="QimCMS">QimCMS</a><a class="dropdown-item noborder" href="https://www.oksucai.com/index.php?a=lists&catid=31" title="QIM模块">QIM模块</a><a class="dropdown-item " href="https://www.oksucai.com/index.php?a=lists&catid=32" title="QIM插件">QIM插件</a> </div> </li> <!--技术资料--> <li class="nav-item dropdown "> <a href="https://www.oksucai.com/index.php?a=lists&catid=8" class="nav-link dropdown-toggle" title="" id="dropdown8" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">技术资料 <b class="caret"></b></a> <div class="dropdown-menu" aria-labelledby="dropdown8"> <a class="dropdown-item " href="https://www.oksucai.com/index.php?a=lists&catid=33" title="网站开发">网站开发</a><a class="dropdown-item noborder" href="https://www.oksucai.com/index.php?a=lists&catid=34" title="程序软件">程序软件</a><a class="dropdown-item " href="https://www.oksucai.com/index.php?a=lists&catid=35" title="电脑硬件">电脑硬件</a> </div> </li> </ul> </div> <ul class="navbar-nav ml-md-auto mr-2" id="leftloging"> <li class="nav-item"> <a id="toggle-search" class="nav-link btn-search" href="javascript:;"> <i class="fa fa-search"></i>搜索</a> <form id="search-form" class="form-inline pull-right" role="search" action="#" method="get" target="_blank"> <div class="form-group"> <input name="KeyWord" class="form-control mr-sm-2" type="text" placeholder="全站搜索"> </div> <button class="btn my-2 my-sm-0" type="submit" style="background:none; margin-left:-3rem; color:#fff;" ><i class="fa fa-search" ></i></button> </form> </li> <li class="nav-item"> <a class="nav-link" href="/index.php?m=Member&c=Index&a=login">登陆</a></li> <li class="nav-item"> <a class="nav-link" href="/index.php?m=Member&c=Index&a=register">注册</a></li> </ul> </div> </header>