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

.container {

  padding-right: 15px;

  padding-left: 15px;

  margin-right: auto;

  margin-left: auto;

}

@media (min-width: 768px) {

  .container {

    width: 750px;

  }

}

@media (min-width: 992px) {

  .container {

    width: 970px;

  }

}

@media (min-width: 1200px) {

  .container {

    width: 1170px;

  }

}

.container-fluid {

  padding-right: 15px;

  padding-left: 15px;

  margin-right: auto;

  margin-left: auto;

}

.row {

  margin-right: -15px;

  margin-left: -15px;

}

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

<!DOCTYPE html>

<html>

   <head>

		<title>自定义占满wgnu</title>

		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- 新 Bootstrap 核心 CSS 文件 -->

		<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

		<!-- 可选的Bootstrap主题文件（一般不使用） -->

<!--		<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>-->

		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

		<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

		<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

		<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->

		<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->

		<!--[if lt IE 9]>

		   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

		   <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

		<![endif]-->

		<style>

			div{

				height:200px;

			}

		</style>

   </head>

   <body>

		<div class="container">

			<div class="row" style="background:red;">

				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background:pink;">a1</div>

				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background:purple;">a2</div>

			</div>

			<div class="row" style="background:yellow;">

				<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" style="background:orange;">b1</div>

				<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" style="background:green;">b2</div>

			</div>

		</div>

   </body>

</html>

　　

2.去掉container,则可以全屏

<!DOCTYPE html>

<html>

   <head>

		<title>自定义占满wgnu</title>

		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- 新 Bootstrap 核心 CSS 文件 -->

		<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

		<!-- 可选的Bootstrap主题文件（一般不使用） -->

<!--		<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>-->

		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

		<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

		<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

		<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->

		<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->

		<!--[if lt IE 9]>

		   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

		   <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

		<![endif]-->

		<style>

			div{

				height:200px;

			}

		</style>

   </head>

   <body>

		<div>

			<div class="row" style="background:red;">

				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background:pink;">a1</div>

				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background:purple;">a2</div>

			</div>

			<div class="row" style="background:yellow;">

				<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" style="background:orange;">b1</div>

				<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" style="background:green;">b2</div>

			</div>

		</div>

   </body>

</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. homework-04 抓瞎

    程序截图 这是基本版本截图....空都没填上 四个角的话 可以留下四个单词 最后添上就行 程序思路 在一个大平面上先一个中心,然后从中心向四周填词 每次填词时,寻找一个使得矩阵最小的 代目如下 #in ...

  2. 代码实现Autolayout

    代码实现Autolayout的步骤 利用NSLayoutConstraint类创建具体的约束对象 添加约束对象到相应的view上 - (void)addConstraint:(NSLayoutCons ...

  3. 设计模式之Birdge（桥接）模式

    1.出现原因 1.同一个类型,有两个变化的维度(两个维度的抽象:一个抽象部分的抽象,一个实现部分的抽象) 2.如何应对这种“多维度的变化”?如何利用面向对象技术来使得同一类型可以轻松地沿着两个方向变化 ...

  4. EntityFramework走马观花之CRUD（上）

    对于任何一个ORM框架,CRUD都是其核心功能,可以这么说,CRUD功能实现得好坏,直接决定了此ORM框架的命运. CRUD是英文Create.Read.Update.Delete四个单词的缩写,对应 ...

  5. Linux 下Valgrind 使用

    Valgrind包括如下一些工具: Memcheck.这是valgrind应用最广泛的工具,一个重量级的内存检查器,能够发现开发中绝大多数内存错误使用情况,比如:使用未初始化的内存,使用已经释放了的内 ...

  6. hdu 2255 奔小康赚大钱 最大权匹配KM

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2255 传说在遥远的地方有一个非常富裕的村落,有一天,村长决定进行制度改革:重新分配房子.这可是一件大事 ...

  7. hdu 3487 Play with Chain

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3487 YaoYao is fond of playing his chains. He has a c ...

  8. linux命令集——<一>目录处理命令

    1.ls,命令,显示当前目录下文件 命令 所在路径 功能描述 执行权限 选项 说明 ls /bin/ls 显示目录文件 所有用户可用 -a 显示所有文件,包括隐藏文件         -l 显示详细信 ...

  9. Poj 1255 覆盖的面积 2014-07-28 12:29 116人阅读 评论(0) 收藏

    覆盖的面积 Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  10. 阿里云centos配置ftp和svn全过程

    1.下载xshell 2.登录centos 3.安装vsftpd [root@xxx]# yum install vsftpd //安装vsftpd [root@xxx]# chkconfig vsf ...