如题，持续总结自己在使用BootStrap中遇到的问题，并记录解决方法，希望能帮到需要的小伙伴。
应用场景：经典上下布局中，顶部导航条固定，下部填充不显示滚动条
解决方案：导航条固定在顶部，同时为body设置内边距（padding-top），内边距为导航条高度（默认50px，可自己调整高度），html代码如下：
<!--html页面布局--> <div> <!--导航栏--> <div role="navigation"> <div> <!--logo图标--> <div> <button type="button" data-toggle="collapse" data-target="#myMenu"> <span>切换导航条</span> <span></span> <span></span> <span></span> </button> <a href=""> <img src="https://www.jb51.net/images/logo_2.png" alt=""> </a> </div> <!--导航栏菜单--> <div> <ul> <li> <a href="https://www.jb51.net/index.html">主页</a> </li> <li> <a href="#" data-toggle="modal">河道站点</a> </li> <li> <a href="#" data-toggle="modal">水库站点</a> </li> <li> <a href="#">气象站点</a> </li> <li> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">降雨量<span></span> </a> <ul> <li> <a data-toggle="modal">1小时降雨</a> </li> <li> <a href="#">3小时降雨</a> </li> <li> <a href="#">24小时降雨</a> </li> </ul> </li> </ul> <form role="search"> <div> <input type="text" placeholder="选择日期"> </div> <button type="button">确定</button> </form> </div> </div> </div> <!--地图窗口--> <div></div> </div> </body> </html>
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实战教程