Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好。下面我们列出了如何禁用这一特性,就像这个非响应式布局实例页面一样。

禁止响应式布局有如下几步:

  1. 移除 此 CSS 文档中提到的设置浏览器视口(viewport)的标签:<meta>
  2. 通过为 .container 类设置一个 width 值从而覆盖框架的默认 width 设置,例如 width: 970px !important; 。请确保这些设置全部放在默认的 Bootstrap CSS 文件的后面。注意,如果你把它放到媒体查询中,也可以略去!important 。
  3. 如果使用了导航条,需要移除所有导航条的折叠和展开行为。
  4. 对于栅格布局,额外增加 .col-xs-* 类或替换掉 .col-md-* 和 .col-lg-*。 不要担心,针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。

针对 IE8 仍然需要额外引入 Respond.js 文件(由于仍然利用了浏览器对媒体查询(media query)的支持,因此还需要做处理)。这样就禁用了 Bootstrap 对移动设备的响应式支持。

Bootstrap如何禁止响应式布局的更多相关文章

  1. Bootstrap如何禁止响应式布局 不适配

    Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好.下面我们列出了如何禁用这一特性,就像这个非响应式布局实例页面一样. 禁止响应式布局有如下几步: 移除 此 ...

  2. bootstrap 自适应和响应式布局的区别

    自适应:  不管屏幕多大,都尽量不换行,而只是横向缩放. 响应式: 屏幕变小了之后,属于同一行的元素受到挤压后,行的右边元素自动换行显式: 屏幕大了后,本属于同一行的元素尽可能的排在同一行内: boo ...

  3. Bootstrap工具包--用于响应式布局和移动设备优先的web项目

    Bootstrap是用于前端开发的工具包,是一个css/html框架 用于响应式布局和移动设备优先的web项目 响应式布局--一个网站能兼容多个终端 有很多版本:v3,v4,v5   三个没啥区别  ...

  4. Bootstrap学习笔记-响应式布局原理

    响应式布局的原理就是利用css3中@media媒体来实现的 <html> <head> <meta charset="utf-8"> <t ...

  5. bootstrap第一天,响应式布局,栅格系统运用

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...

  6. Bootstrap实战 - 响应式布局

    一.介绍 响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...

  7. 关于bootstrap和响应式布局

    bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...

  8. 响应式布局之BootStrap

    本文在于巩固基础 学习bootStrap官网http://getbootstrap.com/ 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多 ...

  9. Bootstrap禁用响应式布局

    在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootst ...

随机推荐

  1. [译].Net中的内存

    原文链接:https://jonskeet.uk/csharp/memory.html 人们在理解值类型和引用类型之间的差异时因为“值类型在栈上分配,引用类型在堆上分配”这句话造成了很多混乱.这完全是 ...

  2. MyBatis 文档 完整版

    框架技术 1.框架技术 01.是一个应用程序的半成品 02.提供可重用的公共结构 03.按一定规则组织的一组组件 2.分析优势 01.不用再考虑公共问题 02.专心的业务实现上 03.结构统一,易于学 ...

  3. UML同一建模语言

    结构型图:描述系统静态结构,显示系统类之间的静态关系. 行为型图:描述系统的动态属性,显示系统元素如何协作产生满足要求的系统行为. 类图分类名,属性清单,方法清单,性质清单几层 类之间的关系:1 一般 ...

  4. GitLab与Git的结合

    作为一名刚入职的大数据初级开发工程师,来到公司后发现代码是部署在GItLab上,之前一直认为代码可以放在码云.github上面,然后就很迷惑就对GitLab进行了了解,将git 和gitlab结合起来 ...

  5. 基于drone构建CI-CD系统

    kubernetes集群三步安装 CI 概述 用一个可描述的配置定义整个工作流 程序员是很懒的动物,所以想各种办法解决重复劳动的问题,如果你的工作流中还在重复一些事,那么可能就得想想如何优化了 持续集 ...

  6. 【iOS】UITableViewDelegate 方法没有调用

    可能原因:没有调用 reloadData 方法. [self.tableView reloadData];

  7. 腾讯位置服务API快速入门

    前言 之前项目有个需求,在网页上显示微信发送过来的位置信息,该开始想用百度地图,后来发现腾讯地图相对简单一点 快速入门 申请Key https://lbs.qq.com/guides/startup. ...

  8. SpringMvc新建实例配置

    一.创建项目: 1.建立新的动态web项目: 2.为项目命名为:SpringMVC_01 3.添加tomcat运行时环境\依赖库  如果是MyEclipse的话创建web项目时就不需要此步骤 右键项目 ...

  9. Oracle中ROWNUM伪列和ROWID伪列的用法与区别

    做过Oracle分页的人都知道由于Oracle中没有像MySql中limit函数以及SQLServer中的top关键字等,所以只能通过伪列的方式去满足分页功能,在此,不谈分页方法,只从根本上去介绍这两 ...

  10. C#:正则表达式类

     Regex r = new Regex("abc"); // 定义一个Regex对象实例(Regex r = new Regex("abc", RegexOp ...