首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何修复IE8下无法正常工作的Bootstrap3 col-md-4和col-lg-4?

要修复IE8下无法正常工作的Bootstrap3 col-md-4和col-lg-4,可以尝试以下方法:

  1. 使用Respond.js:Respond.js是一个JavaScript库,可以让IE8及更早版本的浏览器支持媒体查询。在页面中引入Respond.js库,并确保在其他脚本之前加载。
  2. 使用HTML5shiv:HTML5shiv是一个JavaScript库,用于在旧版本的IE浏览器中支持HTML5元素。在页面中引入HTML5shiv库,并确保在其他脚本之前加载。
  3. 使用条件注释:在HTML文件的head部分添加条件注释,针对IE8及更早版本的浏览器加载特定的CSS样式。例如:
代码语言:html
复制
<!--[if lt IE 9]>
<link rel="stylesheet" href="ie8-fix.css">
<![endif]-->

在ie8-fix.css文件中,可以针对col-md-4和col-lg-4样式进行修复。

  1. 自定义CSS样式:如果以上方法无效,可以通过自定义CSS样式来修复。在自定义CSS文件中,为col-md-4和col-lg-4添加必要的样式,以确保在IE8下正常显示。例如:
代码语言:css
复制
@media screen and (min-width: 992px) {
  .col-md-4, .col-lg-4 {
    width: 33.33333%;
    float: left;
  }
}

这样可以将col-md-4和col-lg-4的宽度设置为33.33333%,并使用浮动来实现布局。

以上是修复IE8下无法正常工作的Bootstrap3 col-md-4和col-lg-4的几种方法。根据具体情况选择适合的方法进行修复。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

移动开发-响应式

通过媒体查询来改变这个布局容器大小,再改变里面子元素排列方式大小,从而实现不同屏幕,看到不同页面布局样式变化 也可以根据实际情况自己定义划分 Bootstrap 简介: Bootstrap...:停止维护,兼容性好,代码不够简洁,功能不够完善 3.4.1:稳定, 但放弃了IE6-IE7,对IE8支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先Web项目 4.6.1 :最新版,目前还不是很流行...column) 大于12,多余列所在元素将被整体另起一行排列 每一列默认有左右15像素 padding 可同时为一列指定多个设备类名,以便划分不同份数 例如 class= col-md-4 col-sm...(margin) 1 <div class="<em>col-lg-4</em> col-lg-offset...hidden-xs 隐藏 可见 可见 可见 .hidden-sm 可见 隐藏 可见 可见 .hidden-md 可见 可见 隐藏 可见 .hidden-lg 可见 可见 可见 隐藏 为了加快对移动设备友好<em>的</em>页面开发<em>工作</em>

2.4K20
  • 移动端WEB开发之响应式布局

    原理就是在不同屏幕,通过媒体查询来改变这个布局容器大小,再改变里面子元素排列方式大小,从而实现不同屏幕,看到不同页面布局样式变化。...对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先WEB 项目。...)”所在元素将被作为一个整体另起一行排列 每一列默认有左右15像素 padding, 可以同时为一列指定多个设备类名,以便划分不同份数 例如 class="col-md-4 col-sm...-- 列偏移 -->     1     右侧 ​ 响应式工具 为了加快对移动设备友好页面开发工作,利用媒体查询功能,并使用这些工具类可以方便针对不同设备展示或隐藏页面内容。

    4K20

    利用Flask搭建微电影视频网站(三):前端首页搭建

    {% endblock %} 接着我们再次刷新一,页面正常显示了:[1240] 会员登录页面搭建 打开app/home/views.py文件,新建以下代码: from flask import... {% endblock %} 再刷新一我们页面试试,发现菜单栏已经可以正常显示了:[1240] 接下来将home/home.html里面的style进行合并,再进行挖坑填坑操作: <...文件,发现样式页面都正常显示了:[1240] 电影搜索页面搭建 老规矩,在home/views.py文件下面新增以下代码: # 搜索页面 @home.route('/search/') def search...打开home/search.html页面,我们新建以下代码:[1240] 然后展开收起页面,利用for循环进行填充:[1240] 接下来就是search相关url跳转配置,home.htmllayout.html...-- 代码 结束 --> 然后刷新一我们页面,发现404页面可以正常显示出来。 至此,我们本篇关于前端首页搭建介绍就到此为止了,感谢你赏阅!

    3.4K10

    Python Web 菜谱系统首页,不会前端技术,也能做【附源码】

    本篇博客开始构建菜谱系统前端页面,基本涉及知识就是网页模板框架与前端,优先会从用户可鉴权系统开始编写,上篇博客模型相关内容,先放一,不久就要继续使用。...下面开始编写首页部分前端代码,我们选择是 [BootStrap3 框架],这个框架接受起来比较容易一些。...肯定有人问,难道代码都是自己敲出来吗?这肯定不是,如果这样,没有前端知识,咱就学不下去了,这些内容是修改出来。 打开 [Bootstrap3 模板页],在里面选择一个模板,例如下面的内容。...模板中标签使用 {% %} 进行表示,标签中可以包含业务逻辑代码,有时也会存在开始标签结束标签。...Django 中最简单首页制作,尽量在无前端知识铺垫情况,帮助你学习 Python Web 相关知识,喜欢就点个赞吧。

    52740

    【Java 进阶篇】手把手教你创建 Bootstrap 旅游网站

    在本篇博客中,我们将手把手教您如何创建一个令人兴奋旅游网站,使用流行前端框架 Bootstrap 来简化整个过程。 为什么选择 Bootstrap?...Bootstrap 主要优点包括: 响应式设计:Bootstrap 可以轻松实现响应式设计,确保您网站在各种设备上都能正常显示,包括桌面电脑、平板电脑移动设备。...每个目的地都有一张图片、标题、描述一个“了解更多”按钮。这个部分采用了响应式网格布局,确保在不同屏幕尺寸都能正常显示。 旅游套餐 为了吸引游客,您可以在网站上展示各种旅游套餐。...-- 飞机图标 --> 响应式设计 确保您网站在不同屏幕尺寸都能正常显示。使用 Bootstrap 栅格系统来创建响应式布局,以适应不同设备屏幕尺寸。...步骤4:测试优化 在完成网站后,进行测试以确保一切正常工作。测试不同浏览器设备,以确保网站在各种情况都能正常运行。 优化网站以提高性能。确保图像进行了压缩,以减少加载时间。

    24650

    Jump Start Bootstrap 第1章

    想象一,你设计了一个网站,它拥有引人注目的导航条、时髦按钮、漂亮排版、文本图像占位符、大图片滚动条…然而,你不是一个前端开发专家。...Bootstrap1.0.0是在2011年推出,只有CSSHTML组件。在Bootstrap1.3.0之前,它还没有包含JavaScript插件,这个版本也兼容IE7IE8。...在经历了15次重大更新之后,2013年Bootstrap3是另一个重要版本,成为了“移动为先,总是响应”框架。在早期版本Bootstrap3框架中,响应式网站是一个可选项。...在2013年发布版本中,类名称项目的文件夹结构都发生了变化。但是请注意,Bootstrap3并不是向后兼容。你不能通过替换核心CSSJavaScript文件,直接迁移到这个版本。...然后我们有两个更大帖子放在小帖子下面。最后,我们有一个页脚部分,其中有简单版权文本。 很明显,我们无法轻易地在平板电脑手机上看到这一页,因为它无法正确地适应屏幕。设计需要为这些用户定制。

    3.5K40

    【应用】信息短时存储

    因为就是为了给手机电脑之间复制粘贴提供一个介质,所以信息有效时间暂时设为了2分钟,2分钟之后就会清除保存信 前端实现 整体风格 程序使用是bootstrap框架,如果你还没有用过这个前端框架,...那么强烈推荐你试用一,因为使用该框架可以极大减少你工作量,并且兼容手机设备。...,将footer固定在底部,当页面内容高度大于屏幕高度时,footer会随着滚动条滚动,不会遮盖到正常内容,下面一个解决方法,这里 是原文地址。...php restful service 因为应用逻辑非常简单,就是一个存取数据,所以简单实现了几个restful接口,并没有使用专门框架(主要是对php不熟悉)。...header('Access-Control-Allow-Origin:*'); 前端使用jquery $.ajax 发送ajax请求,在IE10及以上版本中,工作正常,但是IE9及以下版本无法正确访问

    1.5K30

    浏览器兼容

    一、什么是浏览器兼容问题 同一份代码,有的浏览器显示效果正常,有的浏览器显示不正常 二、为什么会有浏览器兼容问题 同一产品,版本越老 bug 越多 同一产品,版本越新,功能越多。...ie9) (4)react(兼容ie8) 不同框架兼容浏览器不一样,在开发之前需要留意一 2、条件注释(又叫IE条件注释) 条件注释 (conditional comment) 是于HTML源码中被...[endif]--> 使用了条件注释页面在 Windows Internet Explorer 9 中可正常工作,但在 Internet Explorer 10 中无法正常工作。...(如IE6IE7),对CSS解析认识不完全一样,因此会导致生成页面效果不一样,得不到我们所需要页面效果。...七:常见css属性兼容情况 inline-block: >=ie8 min-width/min-height: >=ie8 :before,:after: >=ie8 div:hover: >=ie7

    1.9K52

    网页布局几种方式有哪些_做网页建议用哪种布局

    流式布局(Liquid Layout)   为网页设置一个相对宽度,页面元素大小按照屏幕分辨率进行适配调整,但整体布局不变,通常以百分比做为长度单位(通常搭配 min-*、max-* 属性控制尺寸流动范围以免过大或者过小导致元素无法正常显示...缺点:因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕显示效果会变成有些页面元素宽度被拉很长,但是高度、文字大小还是原来一样,显示非常不协调 栅格化布局   将网页宽度人为划分成均等长度...bootstrap 栅格系统是通过一系列组合来创建页面布局,它栅格系统最大分为12份: 不过 版本bootstrap3 与 bootstrap4 实现栅格系统方式不一样, bootstrap3...Media Queries 是响应式设计核心,它根据条件告诉浏览器如何为指定视图宽度渲染页面。在优秀响应范围设计可以给适配范围内设备最好体验,在同一个设备下实际还是固定布局。...弹性布局(rem/em布局)   弹性布局跟流布局很像,网页宽度不固定,使用 em 或 rem 单位进行相对布局,避免了使用像素 px 布局在高分辨率几乎无法辨识缺点,相对%百分比更加灵活,同时可以支持浏览器字体大小调整缩放等正常显示

    3K20

    接口测试平台代码实现45: 接口调试层异常处理

    就是自测 所以我们每写完一个复杂点业务逻辑 功能函数,都要充分考虑各种异常,然后对其进行捕获处理,俗称测试修bug时间。...通过console可以看到,这个接口数据中请求方式为null: 而我们目的是想让其定位到none 所以我们这里既可以在后端修复也可以在前端修复。...这里介绍一个简单后端修复,就是在新建接口函数中,给接口初始请求方式设置称字符串none,而不是不写。 删掉这个旧接口,再新创建接口则可以正常显示了。...那么我就优化一: 找到html最开头,找到这个样式,它控制着这三个中间小按钮样式,不过我们准备把五个按钮统一风格,所以这个.wqrf_button{}没用了,删了。...然后找到这五个按钮html代码,我们采用bootstrap3按钮组写法: 看看效果: 问题6: 有人反应新增项目的按钮,看着很别扭,希望可以改。

    35830

    Jump Start Bootstrap 第2章

    我们将学会网格系统如何工作;我们如何在应用中使用网格系统;我们也将创建简单网页布局去更好理解它。 什么是网格系统?...移动显示线框如图所示 ? 我们刚刚将这两列转换为移动设计中一列。 让我们讨论如何在标记中实现此设计。 桌面显示设计 如前所述,中型显示器被认为大于992px。桌面显示大部分都比这个大。...平板显示设计 现在,让我们修改代码,以实现平板电脑线框布局。...这样,我们有两种用于平板布局:一种是横向模式三栏布局,一种是竖屏模式两栏布局。 移动设备上设计 和平板电脑一样,移动设备也可以在风景人像模式观看。...小结 您可以使用Bootstrap网格系统来生成几乎任何类型网站布局。 如果使用得当,你可以设计一个可以工作在几乎任何类型显示设备美观且响应迅速网站。

    2.9K40

    web移动端开发(7)上传码云+响应式布局_bootstrap框架

    建好以后自己设置一这些: 创建好以后: 然后去下载一个"git",下载完后在你要上传文件根目录下,按右键 选择"git bash here",然后就会跳出一个命令框....原理就是在不同屏幕,通过媒体查询来改变这个容器布局大小,再改变里面子元素排列方式大小,从而实现不同屏幕,看到不同页面布局样式变化....bootstrap里面container宽度是固定,但是不同屏幕,container宽度不同,我们再把container划分为12等份....-4">右侧 看看效果如何: 当然一个盒子在中间居中也可以 列排序 通过使用.col-md-push-* .col-md-pull-* 就可以很容易改变列顺序...尝试将刚刚弄到两侧盒子交换位置. 响应式工具 为了加快对移动设备友好页面开发工作,利用媒体查询功能,并使用这些工具类可以方便针对不同设备展示或隐藏页面内容.

    2.8K11

    毕业一年左右 前端 妹子 面经总结

    准备工作要做好,我是因为才去年毕业啦,所以集中准备在基础知识目前在用VUE框架这两块啦,其他知识点我平时在撸代码时候都有在做笔记,所以都会扫一遍知识点,其他你实际工作中没有用到但是比较流行也不能忽略哦...mapset有没有用过,如何实现一个数组去重,map数据结构有什么优点?...浏览器兼容性问题 因为我工作主要还在专注在web端,所以浏览器兼容性问题没有少碰到过,因主要是兼容IE8以上以及其他各个浏览器,这个就当做总结一吧(在被问到这一块时候其实我是有加分,因为回答比较多...请求 IE浏览器iframe弹窗中输入框光标丢失(无法输入)问题,解决清一frame 兼容IE8 new Date()返回NaN问题,解决自定义方法 function parseISO8601(dateStringInRange...父子组件如何通信? 前端路由有没有用过,你在项目中怎么实现路由嵌套? nextTickVuex两个有没有用过,分为什么情况用到? Vue响应式原理你知道是怎么实现吗?

    50920

    恢复低版本FlashPlayer

    做页游开发,经常会遇到一些很奇怪问题。我最近就遇到一个问题:用户进入游戏,只显示游戏部分界面,chrome浏览器是正常,就IE死活不行,而我自己IE却又是可以(都是IE8)。...右击看了一flash player版本号,她ie8使用flash player版本号比她本机chrome要高,比我也要高,而且是非debug版本。...结果使用QQ管家去卸载flash player,结果说要关闭qq、…一些其它进程。我是通过远程操作,断了QQ就没法操作了,最重要是我不确定用户是否会知道如何卸载flash player。...试了好多次,结果想到一个方法:直接使用系统自带添加/删除应用程序去卸载flash player,然后到注册表里删除flash player版本信息,然后再安装低版本flash player debug...会提示无法删除)。

    1.6K30

    如何使用 Bootstrap 搭建更合理 HTML 结构

    在平时工作中,我一直同事强调,一定要挖掘框架精髓,尽可能使用框架本身具有的类实现布局,几乎所有的 UI 布局都可以使用框架本身完成而不需要编写额外冗余样式。...合理利用栅格 保证合理嵌套 Bootstrap 栅格类随意嵌套是造成 HTML 结构混乱主要原因,虽然 Bootstrap 栅格类在随意嵌套时并不会出现严重问题,但会引发潜在问题,对于细节控是无法容忍...上面的例子比官网多了一层栅格,只有在大屏中才能看到效果,这种栅格内表单嵌套在不熟悉 Bootstrap 情况很容易写乱,但只要记住了上面提到规则,就可以轻而易举写出来。...言归正传,本文主要介绍了在使用 Bootstrap 时如何搭建更合理结构,然而在实际工作中,不管我们用不用框架,都应该尽可能精简并规范化 HTML 结构,这是前端开发人员应该养成良好习惯。...我在之前也写了一篇关于 helper 文章《如何编写通用 Helper Class》,感兴趣的话可以看一看。

    2.1K50
    领券