解决Bootstrap的row类,引起网页横向滚动条的问题。
2016-04-27 19:36
666 查看
在写网页的时候,采用了Bootstrap框架,在使用栅格布局的时候,在父标签中添加row类,发现引起网页出现横向滚动条的问题。
查看row类的css样式内容为:
.row{
margin-left:15px;
margin-right:15px;
}
因此确定就是由于这两个样式引起的。
故重写row类的css样式,即
.row{
margin-left:0px;
margin-right:0px;
}
至于为什么Bootstrap要将row类的左右外边距设定为负值,官网解释为,通过为.row元素设置负值margin从而抵消到.container元素设置的padding,也就间接为“行(row)"所包含的”列(coloum)"抵消掉了padding。而我出现这种问题的原因也是由于没有将行(row)包含在.container(固定宽度)或.container-fluid(100%宽度)中。
因此,另一种解决方法即是将行(row)包含在.container(固定宽度)或.container-fluid(100%宽度)中。
查看row类的css样式内容为:
.row{
margin-left:15px;
margin-right:15px;
}
因此确定就是由于这两个样式引起的。
故重写row类的css样式,即
.row{
margin-left:0px;
margin-right:0px;
}
至于为什么Bootstrap要将row类的左右外边距设定为负值,官网解释为,通过为.row元素设置负值margin从而抵消到.container元素设置的padding,也就间接为“行(row)"所包含的”列(coloum)"抵消掉了padding。而我出现这种问题的原因也是由于没有将行(row)包含在.container(固定宽度)或.container-fluid(100%宽度)中。
因此,另一种解决方法即是将行(row)包含在.container(固定宽度)或.container-fluid(100%宽度)中。
相关文章推荐
- Bootstrap响应式网格
- 基于Bootstrap的jQuery form表单验证插件
- Bootstrap搭建传送带
- Bootstrap(七) Bootstrap支持的JavaScript插件
- Bootstrap(六) 其它内置组件
- Bootstrap(五) 导航条、分页导航
- Bootstrap(四) 菜单、按钮及导航
- bootstrap模版
- Bootstrap(三) 网格系统
- Bootstrap(二) 表单
- bootstrap validator html attributes 选项
- BootStrap响应式导航条
- Bootstrap(一) 排版
- 简介BootStrap model弹出框的使用
- Java全新高大尚HTML5 bootstrap后台框架源码 java图片爬虫 自定义表单
- bootstrap样式大全
- Bootstrap学习速查表(二) 排版及表格
- JS组件Bootstrap实现弹出框效果代码
- Bootstrap滚动监听(Scrollspy)插件详解
- JS组件Bootstrap实现下拉菜单效果代码