首页
学习
活动
专区
工具
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) col-lg-4">1 col-lg-4 col-lg-offset...hidden-xs 隐藏 可见 可见 可见 .hidden-sm 可见 隐藏 可见 可见 .hidden-md 可见 可见 隐藏 可见 .hidden-lg 可见 可见 可见 隐藏 为了加快对移动设备友好的页面开发工作

    2.4K20

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

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

    4.1K20

    利用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.html和layout.html...-- 代码 结束 --> 然后刷新一下我们的页面,发现404页面可以正常显示出来。 至此,我们本篇关于前端首页搭建的介绍就到此为止了,感谢你的赏阅!

    3.4K10

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

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

    54540

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

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

    28850

    Jump Start Bootstrap 第1章

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

    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 中无法正常工作。...(如IE6和IE7),对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: 有人反应新增项目的按钮,看着很别扭,希望可以改。

    38230

    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

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

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

    2.1K50

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

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

    52120
    领券