铁雪资源网 Design By www.gsvan.com
如题,持续总结自己在使用BootStrap中遇到的问题,并记录解决方法,希望能帮到需要的小伙伴。
应用场景:经典上下布局中,顶部导航条固定,下部填充不显示滚动条
解决方案:导航条固定在顶部,同时为body设置内边距(padding-top),内边距为导航条高度(默认50px,可自己调整高度),html代码如下:
<!--html页面布局--> <div class="container-fluid page-wrapper"> <!--导航栏--> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <!--logo图标--> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myMenu"> <span class="sr-only">切换导航条</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href=""> <img src="/UploadFiles/2021-04-02/logo_2.png">CSS代码:
*{ margin:0; padding:0; border:0; } html, body{ height:100%; width:100%; overflow:hidden; } body{ padding-top:50px; } .page-wrapper{ margin:0; padding:0; height:100%; overflow:hidden; } #map{ width:100%; height:100%; }实现效果:
如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程
希望本文所述对大家学习Bootstrap有所帮助。
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无BootStrap实用代码片段之一的评论...