Bootstart4导航水平左右推动支持手机端兼容ios/android

Bootstart4导航wap端不收缩,左右推动支持手机端兼容ios/android;

  1. UI框架
  2. Bootstart
2019-01-02 11:51:10 0
Generic placeholder image
Top-aligned media
广州 | 设计爱好者

关注私信

Bootstart4导航wap端不收缩,左右推动支持手机端兼容ios/android;效果出来,具体参数自己再加已修成成自己想要的效果。

bootstrap导航左右推动.jpg

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>