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. Qt入门1---widget、mainwindow和Dialog区别

    摘要: 看了一个月的Qt,居然没有理清Qt中 ------------------------------------ 1.QMainWindow A main window provides a f ...

  2. 启动级别:init 0,1,2,3,4,5,6

    这是个很久的知识点了,只是自己一直都迷迷糊糊的,今天在翻出来好好理解下.. 0:停机 1:单用户形式,只root进行维护 2:多用户,不能使用net file system 3:完全多用户 5:图形化 ...

  3. PostgreSQL中的引号和null

    今天工作时写了一个sql,但是PostgreSQL总是提示有语法错误,简单的做个记录:  问题1.'' 和“”单引号和双引号         举个例子: #.select id, delivery_d ...

  4. Window 添加定时任务

    简单任务 右键点击 我的电脑->管理->任务计划程序库->创建基本任务 然后选择任务类型,触发时间,触发程序就可以了,可以精确到秒 带参数的计划任务 如果执行程序是cmd 可选参数那 ...

  5. 用setTimeout 代替 setInterval实时拉取数据

    在开发中,我们常常碰到需要定时拉取网站数据,如: setInterval(function(){ $.ajax({ url: 'xx', success: function( response ){ ...

  6. 省选加油>_<

    今天没有写题诶……看了看以前的模板……明天就要省选了>_<加油~~ 要不再去打局dota吧>_>

  7. Project Facets中Dynamic Web Module无法设置2.5的解决方法

    为什么将jre改到1.6,还是无法改变dynamic web module 到2.5啊 解决方法: 在工程目录下有一个.settings文件夹,打开org.eclipse.wst.common.pro ...

  8. log4j 配置实例

    1. http://hehongwei44.iteye.com/blog/1494999 2. http://maymay.iteye.com/blog/1275432 #log4j.rootLogg ...

  9. Leetcode#99 Recover Binary Search Tree

    原题地址 中序遍历二叉搜索树,正常情况下所有元素都应该按递增排列,如果有元素被交换,则会出现前面元素大于后面的情况,称作反序.由于交换了两个节点,所以通常会有两处反序,但如果是两个相邻节点发生了交换, ...

  10. 使用feof()函数判断文件是否结束

    课本上时这样写的:(用putchar(ch);代表对取出来的字符的处理.) while(!feof(fp)) { ch=fgetc(fp); putchar(ch); } 但是,这样写的话,fgetc ...