解决bootstrap中大于1200px的显示问题
来源:互联网 发布:北大青鸟怎么样知乎 编辑:程序博客网 时间:2024/06/06 00:16
对于宽度大于1200px的网页(比如1920px),bootstrap默认的container类的宽度是(1140px + @grid-gutter-width)此处为数据来源,总之只占用了页面中的一部分,效果如图:
如果我们要做一个宽屏的显示效果,将整个导航栏充满一整行,那么我们可以选择定制bootstrap,在bootstrap定制页面中,选择你要修改的项,在container sizes中进行修改,你可以指定为具体的数值,当然为了进行适应,你可以修改为百分数的形式如(100%),最后下载你定制的bootstrap,在生成的文件中,会比原来的文件多一个config.json,最后实现效果。效果如图所示:
更新:
今天使用bootstra 的时候突然发现,要覆盖宽屏,可以不用定制boostrap就可以实现,那就是在你需要的部分,添加
<div class="container-fluid row"></div>其中,container-fluid的作用是100%的宽度,占据全部视口(viewport)的宽度,如果不添加row,会有默认的边距,导致两边有缝隙,加上就好了。如图:
阅读全文
0 0
- 解决bootstrap中大于1200px的显示问题
- 解决bootstrap中glyphicon无法显示图标只显示方框的问题
- 解决bootstrap中模态框显示后页面抖动的问题
- 解决bootstrap导入图标组件无法显示的问题
- IE6的png显示问题以及div无法实现1px高度问题的解决
- 高度大于100%的fixed定位div显示不全问题(轻松解决)
- 解决jasperreports报表在HTML页面显示的PX图片的问题
- 在Yii中解决引入本地Bootstrap文件字体图标无法显示问题
- 解决NS3中打开XML文件提示NetAnim版本必须大于等于3.108的问题
- bootstrap解决图标显示不出来问题,出现GET .woff 404 (Not Found)的问题
- Bootstrap中Glyphicons 图标不显示问题
- bootstrap中时间显示格式问题
- bootstrap中table隐藏后显示问题
- bootstrap中datetimepicker显示1899问题
- bootstrap datepicker 在bootstrap modal中不显示问题
- bootstrap datepicker 在bootstrap modal中不显示问题
- struts中中文显示问题的解决。。
- Eclipse中解决中文显示的问题
- WdatePicker改变事件触发优化
- 11g搭建DataGuard的步骤
- 世界互联网大会,马云、马化腾、库克、李彦宏都说了一件事
- Android系统移植与调试之安装apk时MTK命令和出现Failure [INSTALL_FAILED_DEXOPT]问题解决方法
- ideal激活
- 解决bootstrap中大于1200px的显示问题
- rpc 简单模型
- memcached真实项目中的应用
- mysql 中常用的语句
- 内存加载图片压缩 BitmapFactory.Options
- 【特征检测】BRIEF特征点描述算法
- 被上班势力吓哭~来点提神的吧!
- R使用小技巧
- oracle dbf文件更换目录