Bootstrap使用响应式设计(Responsive design)时导航条上部有空白的解决方案
2014-05-09 23:46
721 查看
原因
Bug出现需要同时满足以下3个条件:- 顶部导航条navbar使用class
navbar-fixed-top
- 参考Bootstrap官方网站, 给body添加样式
padding-top: 60px;
- 使用响应式(Responsive design), 并且处在此状态下(默认为宽度<=980时触发)
解决方案1
给此段样式加上条件@media (min-width: 981px) { body { padding-top: 60px; } }
解决方案2
将bootstrap-responsive.css放在body样式之后<link href="../css/bootstrap.css" rel="stylesheet"> <style type="text/css"> body { padding-top: 60px; } </style> <link href="../css/bootstrap-responsive.css" rel="stylesheet">
相关文章推荐
- Bootstrap风格的按钮 BButton(把图标做成字体,可以省下很多图片资源)
- bootstrps 、bagging与 boosting
- Bootstrap学习js插件篇之轮播
- 基于Bootstrap高级UI设计
- Bootstrap精巧布局
- Bootstrap栅格系统研究
- 优化checkbox和radio,类似Bootstrap中的iCheck
- Bootstrap Method 自助法
- 4.9Bootstrap学习js插件篇之折叠
- 4.8Bootstrap学习js插件篇之按钮
- Bootstrap初学(一)
- 4.7Bootstrap学习js插件篇之警告框
- 4.6Bootstrap学习js插件篇之弹出框
- Bootstrap 导航
- 4.5Bootstrap学习js插件篇之工具提示
- Bootstrap 使用清单组组件创建价格表
- Bootstrap
- Bootstrap视频资源
- debootstrap构建自己的debian系统
- Netty源码学习-ServerBootstrap启动及事件处理过程