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. Java 集合转换(数组、List、Set、Map相互转换)

    转自:http://blog.csdn.net/top_code/article/details/10552827 package com.example.test; import java.util ...

  2. 自定义jstl标签开发

    从jsp1.1开始就可以在jsp页面中使用自定义标签了,使用自定义标签不但可以实现代码重用,而且可以使jsp代码更简洁.Jsp2.0的标签扩展API中又增加了SimpleTag接口和其实现类Simpl ...

  3. [DHCP服务]——DHCP详解

    DHCP:(Dynamic Host Configuration Protocol) 动态主机配置协议 1. DHCP是一个局域网的网络协议,采用UDP协议工作 2. DHCP作用 (1)主要应用在大 ...

  4. TList,TObjectList 使用——资源释放

    TOjectList = Class (Tlist); TOjectList继承Tlist,从名字上看就可以知道它是专门为对象列表制作的,那么他到底丰富了那些功能呢? 首先是 TObject 作为对象 ...

  5. Careercup - Microsoft面试题 - 5943729928011776

    2014-05-10 21:56 题目链接 原题: Suppose you get number of unique users every second from bing For eg, ,,,, ...

  6. 对git的初步认识

    虽然经常听说博客,但是却是第一次用.就像,虽然经常见电脑,但是却第一次接触软件.对于git也是一样,从来没听过,更不了解. 因为自己私下也没有去过多的了解,所以对于git只有一些有关书面资料的很片面的 ...

  7. 使用Fiddler

    右键一个Result,点击Inspect in new Window(Shift+Enter)

  8. 01.Apache FtpServer配置

    1.解压Apache FTPServer 将下载下来的压缩包(ftpserver-1.0.6.zip)解压到本地,其目录结构如下图: 2.修改users.properties 修改 \apache-f ...

  9. 【BZOJ】【4027】【HEOI2015】兔子与樱花

    贪心 树上贪心问题……跟APIO2015练习赛的C很像啊…… 我的思路是:从叶子向上考虑,令a[x]表示x这个节点上樱花数量与儿子个数的和(即对于任意的x,都有$a[x]\leq m$)每次从儿子的a ...

  10. ajax 乱码

    1. 在页面的中文变量前添加encodeURIComponent() $.ajax({ type: "POST", url: "", data:{   id:e ...