关于禁用bootstrap响应式解决方法
前几天接到一个任务,用bootstrap框架写几个静态页面,由于长时间专注于后台开发,所以,花费了3天时间,才终于写完了页面,其中,来回的修改,把遇到的问题说一下。
用bootstarp做完页面后,组长当时又改变主意了,说不用bootstrap,或者禁用bootstrap响应式,没办法,只有禁用响应式,花费时间最短了,去bootstrap官网上看,禁用响应式的话,第一:去掉头部<meta name="viewport" content="width=device-width, initial-scale=1.0”>。第二:设置.container宽度,比如:
container{
width: 1170px;
max-width: none !important;
}
第三:采用.col-xs-(最小设备栅格类)的样式来代替.col-md-以及.col-lg-*。
但是,此时问题并没有结束。
现在给container一个固定宽度,白色背景的导航条宽度可以铺满浏览器,但是,随着屏幕变小,导航条白色背景就不能铺满浏览器变小后的宽度!还有就是我的轮播图也是要求铺满浏览器宽度,现在也变得居中显示了,心里想,早知道就不用bootstrap了,难道我现在还有重写页面?上网查了一下,没有找到解决方法,后来,灵机一动,我可以给body一个宽度啊,或者给导航条和轮播图分别也设置相同的宽度,这个时候的问题,就是,设置多少宽度合适啊?发现,不能这样做!
最后,用火狐调试代码的时候,无意之间发现了这个好东西,@media ,但是,我自己设置了,在浏览器上没反应,无语了,最后,花费了一点时间发现这个样式没写对。
所以,解决导航条和轮播图响应式问题的,第四点就是:
@media screen and (max-width: 1400px) {
body{
width: 1400px;
}
}
他的意思就是,当屏幕小于1400px的时候,把body宽度设置为1400px.不知道的读者可以上网学习一下,这可是一个好东西!
最后,说一下,top指的是position绝对定位时的top。关于对span设置宽度和高度是没有作用的,他不是块级元素,div是块级元素,span是行内元素。如果想用span实现下图中的按钮,只需要根据需要设置padding即可。(padding:20px 20px等)
---------------------
作者:JEE-逆水百川
来源:CSDN
原文:https://blog.csdn.net/u012759397/article/details/63262409
版权声明:本文为博主原创文章,转载请附上博文链接!
关于禁用bootstrap响应式解决方法的更多相关文章
- 模拟Bootstrap响应式网格系统
Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...
- Bootstrap 响应式设计
本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...
- paip.自适应网页设计 跟 响应式 设计方法与工具补充(2)o54
paip.自适应网页设计 跟 响应式 设计方法与工具补充(2)o54 #-----响应式 设计框架 Bootstrap比较热门. Foundation 号称是世界上最先进的响应式前端框架. #---绝 ...
- bootstrap响应式网页设计的9条基本原则!
bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...
- Bootstrap响应式布局
Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...
- bootstrap响应式前端页面
技术:HTML+CSS+JS+bootstrap 概述 这套代码响应式前端页面基本写完了,适合初学前端的同学,里面主要运用了HTML+CSS布局和动画,js逻辑较少,页面都是静态,未接入接口.响应 ...
- Bootstrap 响应式表格
响应式表格 通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px).当在大于 768px 宽的大型设备上查看时,您 ...
- 前端bootstrap框架禁用响应式的方法
在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓“萝卜青菜各有所爱”,如果你想要使用Bootstrap开发自己的项目 ...
- 【温故知新】——Bootstrap响应式知识点复习
前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 开发工具 1.记事本,Editplus,... ... 2.Sublime,Dreamweaver 3.Webstorm = ...
随机推荐
- jenkins构建一个go项目
Jenkins安装 最低配置: 不少于256M内存,不低于1G磁盘,jdk版本>=8 安装jdk1.8 yum install -y java-1.8.0-openjdk wget -O / ...
- iOS 一些struct类型的NSLog输出
我们经常会输出一些坐标尺寸信息之类的,比如view的frame,是CGRect类型的,用frame.oringial.x 和frame.size.width来做NSLog参数好麻烦,还好苹果对这些常用 ...
- 聊聊高并发(三十九)解析java.util.concurrent各个组件(十五) 理解ExecutorService接口的设计
上一篇讲了Executor接口的设计,目的是将任务的运行和任务的提交解耦.能够隐藏任务的运行策略.这篇说说ExecutorService接口.它扩展了Executor接口,对Executor的生命周期 ...
- php遍历对象属性,可以使用foreach,直接打印出属性
依然遵循私有属性不可以在外访问,(不能打印出来) 但可以在内部访问这个原则.
- Spark源码分析之一:Job提交运行总流程概述
Spark是一个基于内存的分布式计算框架,运行在其上的应用程序,按照Action被划分为一个个Job,而Job提交运行的总流程,大致分为两个阶段: 1.Stage划分与提交 (1)Job按照RDD之间 ...
- JQuery利用选择器定位动态id?
假如我们需要去定位一个动态生成的div,我们需要为它指定一个动态的id 例如: 前台使用EL进行迭代LIST生成div,为其添加动态的id,生成之后变成下面样式 <div id="tz ...
- 摩根大通银行被黑客攻克, ATM机/网银危在旦夕,winxp退市灾难来临了
winxp4月退市到如今还不到半年,就出现故障了 7600多万个消费者银行账户被黑.此外还有700万个小企业账户的信息也被黑客窃取,这个算不算灾难呢?假设等到银行业彻底崩溃,资金彻底丧失,那不仅仅是灾 ...
- Android - 使用messager实现进程间通信(服务器端→客户端,客户端→服务器端双向)
之前看了一篇,然后不自己动手肯定是不行的,然后自己又写了一遍. 背景: 一般使用messenger进行进程间通信的时候,我们只能进行单方向通信.但是有没有办法让服务器端和客户端进行双向通信呢? 解决思 ...
- Linux系统调用及用户编程接口(API)
系统调用 所谓系统调用是指操作系统提供给用户程序调用的一组"特殊"接口,用户程序能够通过这组"特殊"接口来获得操作系统内核提供的服务.比如用户能够通过进程控制相 ...
- Mybatis之入门Helloworld程序
本篇我们来实现一个Mybatis的Helloworld级别的一个示例程序. 一.搭建基本环境 1.基本开发环境搭建,这里选择: eclipse j2ee 版本,mysql 5.1 ,jdk 1.8,m ...