1.由于bootstrap中的.containter是根据媒体查询定死了width,所以页面不会占满全屏，若要全屏，则最外面的div的class不能用container(或改用.container-fluid),container的源码如下

  1. .container {
  2.   padding-right: 15px;
  3.   padding-left: 15px;
  4.   margin-right: auto;
  5.   margin-left: auto;
  6. }
  7. @media (min-width: 768px) {
  8.   .container {
  9.     width: 750px;
  10.   }
  11. }
  12. @media (min-width: 992px) {
  13.   .container {
  14.     width: 970px;
  15.   }
  16. }
  17. @media (min-width: 1200px) {
  18.   .container {
  19.     width: 1170px;
  20.   }
  21. }
  22. .container-fluid {
  23.   padding-right: 15px;
  24.   padding-left: 15px;
  25.   margin-right: auto;
  26.   margin-left: auto;
  27. }
  28. .row {
  29.   margin-right: -15px;
  30.   margin-left: -15px;
  31. }

2.若用.container，则不会全屏

  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4. 		<title>自定义占满wgnu</title>
  5. 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.  
  7. 		<!-- 新 Bootstrap 核心 CSS 文件 -->
  8. 		<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  9.  
  10. 		<!-- 可选的Bootstrap主题文件（一般不使用） -->
  11. <!--		<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>-->
  12.  
  13. 		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  14. 		<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
  15.  
  16. 		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  17. 		<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  18.  
  19. 		<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  20. 		<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
  21. 		<!--[if lt IE 9]>
  22. 		   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  23. 		   <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  24. 		<![endif]-->
  25. 		<style>
  26. 			div{
  27. 				height:200px;
  28. 			}
  29. 		</style>
  30.    </head>
  31.    <body>
  32. 		<div class="container">
  33. 			<div class="row" style="background:red;">
  34. 				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background:pink;">a1</div>
  35. 				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background:purple;">a2</div>
  36. 			</div>
  37. 			<div class="row" style="background:yellow;">
  38. 				<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" style="background:orange;">b1</div>
  39. 				<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" style="background:green;">b2</div>
  40. 			</div>
  41. 		</div>
  42.    </body>
  43. </html>

　　

2.去掉container,则可以全屏

  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4. 		<title>自定义占满wgnu</title>
  5. 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.  
  7. 		<!-- 新 Bootstrap 核心 CSS 文件 -->
  8. 		<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  9.  
  10. 		<!-- 可选的Bootstrap主题文件（一般不使用） -->
  11. <!--		<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>-->
  12.  
  13. 		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  14. 		<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
  15.  
  16. 		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  17. 		<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  18.  
  19. 		<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  20. 		<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
  21. 		<!--[if lt IE 9]>
  22. 		   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  23. 		   <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  24. 		<![endif]-->
  25. 		<style>
  26. 			div{
  27. 				height:200px;
  28. 			}
  29. 		</style>
  30.    </head>
  31.    <body>
  32. 		<div>
  33. 			<div class="row" style="background:red;">
  34. 				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background:pink;">a1</div>
  35. 				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background:purple;">a2</div>
  36. 			</div>
  37. 			<div class="row" style="background:yellow;">
  38. 				<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" style="background:orange;">b1</div>
  39. 				<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" style="background:green;">b2</div>
  40. 			</div>
  41. 		</div>
  42.    </body>
  43. </html>

　　

Bootstrap全屏的更多相关文章

  1. Blazor组件提交全记录: FullScreen 全屏按钮/全屏服务 (BootstrapBlazor - Bootstrap 风格的 Blazor UI 组件库)

    Blazor 简介 Blazor 是一个使用 .NET 生成的交互式客户端 Web UI 的框架.和前端同学所熟知的 Vue.React.Angular 有巨大差异. 其最大的特色是使用 C# 代码( ...

  2. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  3. 如何ios中间Safari在开发了类似的native app像全屏webapp

    本文交换了我www.gbtags.com文章. <meta name="format-detection" content="telephone=no email= ...

  4. 解决Ueditor在bootstarp 模态框中全屏问题

    基本的一些配置就不说了.先说一下要注意的问题:首先是zIndex的设置.记住最好都显示设置模态框和ueditor的zIndex.理清他们的层叠关系. 特别是用到ueditor里面的图片上传功能的更要设 ...

  5. css背景图自适应全屏显示

    前几天我在写一个前端页面的时候,需要用到全屏背景图,但是怎么写都不行(要么不全屏,要么不兼容Bootstrap的响应式布局).对,是我腊鸡 后来我在网上找的时候找到一个大神写的笔记,参(照)考(抄)之 ...

  6. FullPage.js-基于 jQuery 的插件全屏滚动插件

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...

  7. Android UI体验之全屏沉浸式透明状态栏效果

    前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体 ...

  8. android-解决全屏-webview-输入框被输入法挡住-FullScreen-adjustResize失效问题

    由于公司开发的 App 中,Html 的页面嵌入的有点多,坑爹的是,还有很多输入框,这就算了,还要求全屏.然后就出现了这个情况. 下面来唠叨唠叨具体的来龙去脉. 起初是这样的,整个项目基本完工了.测试 ...

  9. iOS 多个播放器同时播放，双击全屏，单击退出全屏

    前言:公司需求如下:点击一个按钮播放一个视频,最多同时播放4个:双击某视频让其全屏,单击再恢复原来的样子.IOS的播放器有两种,MPMoviePlayerController,AVAudioPlaye ...

随机推荐

  1. CAD字体显示错乱问题解决方案

    最近这两天一直在画竣工图,用CAD用得挺多的,所以老是发现一些问题.今天在打开别人发过来的图纸时,我看到竟然还有钢筋符号无法显示…… 像这种问题的解决,据我所知就两种方法: 一.替换使用的字体 首先选 ...

  2. Cocos2dx中利用双向链表实现无限循环滚动层

    [Qboy原创] 在Cocos2dX 3.0 中已经实现一些牛逼的滚动层,但是对于有一些需要实现循环滚动的要求确没有实现,笔者在前段时间的一个做了一个游戏,需求是实现在少有的(13个)英雄中进行循环滚 ...

  3. cocos2dx中使用声音引擎需要包含的头文件

    1.需要包含的头文件和命名空间 #include "SimpleAudioEngine.h"using namespace CocosDenshion;

  4. 找出1-N中1的个数

    一.题目 给定一个十进制的正整数,写下从1开始,到N的所有整数,然后数一下其中出现“1”的个数. 要求: 写一个函数 f(N) ,返回1 到 N 之间出现的 “1”的个数.例如 f(12)  = 5. ...

  5. socket 套接字

    网络:交换机,路由器,网线 交换机:分配.. 路由器:找寻网络线路 网络架构: 应用层 ---> 表示层 ---> 会话层 ---> 传输层 ---> 网络层 ---> ...

  6. 【BZOJ】【3442】学习小组

    网络流/费用流 orz zyf 裸的费用流,根据题目描述即可建出如下的图: S->i 费用表示每有一个加入第 i 个小组的学生,需要花的钱,由于是跟流量(人数)的二次方相关,所以要拆边……然后每 ...

  7. 【BZOJ】【2631】Tree

    LCT 又一道名字叫做Tree的题目…… 看到删边加边什么的……又是动态树问题……果断再次搬出LCT. 这题比起上道[3282]tree的难点在于需要像线段树维护区间那样,进行树上路径的权值修改&am ...

  8. win8 修改msconfig 里面的"引导高级选项" 最大内存后 BSOD的解决方案

    最近由于本人的电脑一直非常卡,于11.4日通过win8任务管理器分析发现 Peer Name Resolution Protocol Peer Networking Grouping Peer Net ...

  9. redis提示Could not get a resource from the pool（jedis连接池配置）

    起初在JedisPool中配置了50个活动连接,但是程序还是经常报错:Could not get a resource from the pool 连接池刚开始是这样配置的: JedisPoolCon ...

  10. HttpWatch 安装后在IE上打开

    启动浏览器, 在空白地方左键,  显示出菜单栏 菜单栏中选择"查看">"浏览器栏">"HttpWatch"启动HttpWatch ...