记一个bootstrap定制container导致页面X轴出现横向滚动条的坑
壹 ❀ 引
在bootstrap定制时,因为UI给的图纸的页面主体部分宽度为1200px,所以我将container容器宽度从默认的1170px改成了1200px,随后在页面缩小的调试过程中发现了页面横轴出现了滚动条,这我就差异了,页面除了container是1200px以外,头部尾部的都是宽度100%,还能有哪个地方超出,简单调试结合bootstrap特性发现了问题所在,这里做个记录。
贰 ❀ 问题
在调试过程中,看了下container容器的宽度,是1200px没错。
但是在查看头部时,发现了一个有趣的问题,头部的宽度是100%,此时调试宽度也确实显示的是1200px,但头部给我显示的内容宽度却只有1184px,怎么凭空少了十几像素。
结果才想起来,因为页面内容比较多,Y轴有滚动条,所以屏幕的1200px被滚动条占去了一部分,实际上并没有这么多。
而bootstrap使用的媒体查询,原本的临界点是屏幕宽度在1200px之上时,container宽度为1170px,特意留了30px当做缓冲。
恰好我在定制时修改了container的宽度,导致页面缩小快到1200px时,container容器一直是固定的1200px,页面因为滚动条的缘故实际不够1200px,这才导致X轴出现了滚动条。
所以说bootstrap在做媒体查询时,不让controller宽度与媒体查询临界点宽度相同还是有一定原因的...
那么怎么解决呢?第一种可以修改媒体查询临界点宽度,这个需要定制解决,其次还可以直接通过overflow处理下就好了。
叁 ❀ 解决
html {
overflow-y: scroll;
} body {
width: 100%;
overflow: hidden;
}
最近在使用bootstrap做项目,也是踩了不少坑,有问题再记录,就先写到这里了。
2019.8.22 修改:
上述解决方案代码中,让body overflow为hidden,意思是XY轴超出都隐藏,但如果Y轴内容多也就看不到了,所以提前给html的Y轴设置了scroll来保证Y轴内容过多时,仍然可以正常阅读。
但我发现这样的设置产生了一个问题,即便Y轴内容不足以产生滚动条时页面右侧都会默认添加一个滚动条的灰色区域,浪费了部分空间,所以不推荐这么设置:
因此还是推荐直接给body添加 overflow-x:hidden 属性。
记一个bootstrap定制container导致页面X轴出现横向滚动条的坑的更多相关文章
- $#65279导致页面body会出现一个空白行
模板文件生成html文件之后会在body开头处加入一个可见的控制符,导致页面头部会出现一个空白行.原因是页面的编码是UTF-8 + BOM. 直接notopad++ 保存为无BO ...
- 记录一个关于 Document.on绑定事件后,导致页面卡顿的情况
假设当前页面的js文件中有如下函数: function A(){ function B(); } function B(){ $(document).on("click",&quo ...
- 使用 elementUI 的表单进行查询,表单中只有一个文本框时,回车会自动触发表单的提交事件,导致页面的刷新。
使用elementUI的el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面: 原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新. ...
- 利用Bootstrap框架制作查询页面的界面
UI设计实战篇——利用Bootstrap框架制作查询页面的界面 Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太 ...
- 解决display none到display block 渲染时间过长的问题,以及bootstrap模态框导致其他框中input不能获得焦点问题的解决
在做定制页面的时候,遇到这么一个问题,因为弹出框用的是bootstrap的自带的弹出框,控制显示和隐藏也是用自带的属性控制 控制显示,在触发的地方 例如botton上面加上 data-toggle=& ...
- 手摸手教你bootstrap定制
老实说我一直不太喜欢使用bootstrap,bootstrap样式组件虽然丰富但实际开发使用到的不多:栅格系统虽然好用,满屏div也是看的头疼:所以当经理说要用bootstrap开发新项目的时候,我内 ...
- 记录一个bootstrap惨痛的错误
记录一个bootstrap的错误,这个错误因为我删除了一个class就导致了页面上显示的错误,这是一个惨痛的教训,特此记录,提醒自己在做前端的修改时,一定要慎之又慎.如果真的要做改动,改完之后也要测一 ...
- Bootstrap定制开发
Bootstrap作为目前很受欢迎的前端框架,越来越多的网站开始使用基于Bootstrap框架进行开发. 1.定制开发方法 (1)Bootstrap定制开发可以使用LESS和Grunt实现定制化 (2 ...
- ztree在onCheck()方法中防止因触发联动关系导致页面多次渲染而卡死的问题
这几天在项目中遇到了要使用树形选择框, 而且要求比较复杂,具体叙述如下: 首先是有个选择框,左边选择是适用的商品,右边显示已经选择的商品.也就是说,左边每次勾选操作,都要触发一个事件去刷新右边的页面, ...
随机推荐
- November 24th, Week 48th, Sunday, 2019
Once you replace negative thoughts with positive ones, you will start having positive results. 淘汰消极思 ...
- 基于django的个人博客网站建立(六)
基于django的个人博客网站建立(六) 前言 今天主要完成的是项目在腾讯云服务器上ubuntu16.04+django+mysql+uwsig+nginx的部署过程网站效果可点击这里访问 主要内容 ...
- JavaScript-----10.作用域
1.作用域 一段程序代码中所用到的名字不是总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域.目的是为了提高程序的可靠性,更重要的是减少命名冲突. 在es6之前,js的作用域有:全 ...
- Springcloud 中 SpringBoot 配置全集 (收藏版)
Springcloud 中 SpringBoot 配置全集 (收藏版) 疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 前言 疯狂创客圈(笔者尼恩创建的高并发研习社群 ...
- swoole是多进程还是多线程
由于PHP语言不支持多线程,因此Swoole使用多进程模式.在多进程模式下存在进程内存隔离,在工作进程内修改global全局变量和超全局变量时,在其他进程是无效的. 进程隔离 $fds 虽然是全局变量 ...
- Web安全测试学习笔记-DVWA-登录密码爆破(使用Burp Suite)
密码爆破简单来说,就是使用密码本(记录了若干密码),用工具(手工也可以,if you like...)一条条读取密码本中的密码后发送登录请求,遍历密码本的过程中可能试出真正的密码. 本文学习在已知登录 ...
- Java入门系列之类继承、抽象类、接口(五)
前言 C#和Java关于类.抽象类.接口使用方式基本相似,只是对应关键字使用不同罢了,本节呢,我们只是对照C#和Java中关于这三个概念在具体使用时,看看有哪些不一样的地方. 类继承 C#和Java在 ...
- scrapy在pycharm配置启动(无需命令行启动)
一.新建文件 run.py这个名字随意哈 方法一. from scrapy.cmdline import execute execute(['scrapy','crawl','爬虫程序名字','-a' ...
- 平时代码中用不到设计模式?Are you kidding me?
引子 平时我是个反应非常慢的人.有多慢呢?大概是两年前有次团队内部开会时,我听到同学说平时代码中用不到设计模式,我当时没有回答.两年后我终于反应过来了:“Are you kidding me?我每天都 ...
- JS简单数据类型
JS数据类型 在计算机中,不同的数据所需要占用的空间是不同的,为了便于把数据分析称所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型 简单数据类型 简单数据类型 说明 默认值 Numb ...