| 标题 | BootStrap实用代码片段之一 |
| 内容 | 这篇文章主要为大家详细介绍了BootStrap实用代码片段之一，总结在使用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="images/logo_2.png"> </a> </div> <!--导航栏菜单--> <div id="myMenu"> <ul> <li> <a href="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" id="datetimepicker" placeholder="选择日期"> </div> <button type="button">确定</button> </form> </div> </div> </div> <!--地图窗口--> <div id="map"></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有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。