bootstrap3中container与container_fluid容器的区别
声明:转自 CSDN博客
.container与.container_fluid是bootstrap中的两种不同类型的外层容器,按照官方的说法,这两者的区别是:
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
一开始,我以为所谓固定宽度是开发者可以设置该容器为固定宽度,所以我采用了如下布局样式:
<body> <div class="container" style="width: 800px" > <div class="col-md-6"> <p>官方解释container容器用于固定宽度并且能够自适应布局,我现在给外层应用了container类的div设置一个固定宽度800px,用来测试是否能实现自适应</p> </div> <div class="col-md-6">
<img src="data:image/QQ截图20150423144403.png" alt="" style="width:100%;"/>
</div> </div> </body>
当我这样做了以后,我发现,缩小浏览器宽度到小于800px的值时,内容不再自适应了,所以,我调出了调试台,看了bootstrap.css中对.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
} }
我忽然明白,所谓固定宽度并不是允许开发者自己设置容器的宽度,而是bootstrap内部根据屏幕宽度利用媒体查询,帮我们设置了固定宽度,并且是能够自适应的。
所以,无论何种情况下,请不要手动为响应式布局中的外层布局容器设置固定宽度值。
那么,.container-fluid,又是怎样的呢?
根据测试,.container-fluid自动设置为外层视窗的100%,如果外层视窗为body,那么它将全屏显示,无论屏幕大小,并且自动实现响应式布局。
结论
container 类和container-fluid类的区别体现在是否有随视口宽度改变的margin存在。
container类所谓的自适应也是通过margin的改变来完成,container-fluid类的百分百宽度是指在固有的15px的padding前提下宽度总是当前视口的宽度。
bootstrap3中container与container_fluid容器的区别的更多相关文章
- bootstrap3中container与container_fluid的区别
.container与.container_fluid是bootstrap中的两种不同类型的外层容器,按照官方的说法,这两者的区别是: .container 类用于固定宽度并支持响应式布局的容器. . ...
- Bootstrap3中.container和.container-fluid区别
.container与.container_fluid是bootstrap中的两种不同类型的外层容器,按照官方的说法,这两者的区别是: .container 类用于固定宽度并支持响应式布局的容器..c ...
- Init Container(初始化容器)
在很多应用场景中,应用在启动之前都需要进行如下初始化操作. ◎ 等待其他关联组件正确运行(例如数据库或某个后台服务). ◎ 基于环境变量或配置模板生成配置文件. ◎ 从远程数据库获取本地所需配置,或者 ...
- .Container与.container_fluid区别
.Container与.container_fluid是bootstrap中的两种不同类型的外层容器,两者的区别是:.container 类用于固定宽度并支持响应式布局的容器..container-f ...
- [技术博客]Pyqt中View类别容器和Widget类别容器的区别
Pyqt中View类别容器和Widget类别容器的区别 简介 在beta迭代中,我们选择用pyqt5来重写alpha迭代中使用tkinter库编写的界面. 按钮之类的与tkiner使用无异,在显示 ...
- 【bootstrap】.container与.container_fluid
.container与.container_fluid是bootstrap中的两种不同类型的外层容器,区别是: .container 类用于固定宽度并支持响应式布局的容器.不用你自己设宽度,通过< ...
- 简单理解Struts2中拦截器与过滤器的区别及执行顺序
简单理解Struts2中拦截器与过滤器的区别及执行顺序 当接收到一个httprequest , a) 当外部的httpservletrequest到来时 b) 初始到了servlet容器 传递给一个标 ...
- HTML中id、name、class 区别
参考:http://www.cnblogs.com/polk6/archive////.html http://blog.csdn.net/ithomer/article/details/ HTML ...
- css中zoom和transform:scale的区别
css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...
随机推荐
- 用CSS3实现的addidas阿迪达斯标志LOGO
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>用CSS3实现的ad ...
- some interesting words
No one gets rich betting against the market. Never bet against the Fed. Bulls make money, bears make ...
- STL之六:map/multimap用法详解
转载于:http://blog.csdn.net/longshengguoji/article/details/8547007 map/multimap 使用map/multimap之前要加入头文件# ...
- arp协议及简单应用
1:什么是arp协议 参考文章:http://blog.csdn.net/tigerjibo/article/details/7351992 全称是:Address Resolution Protoc ...
- 美国选举问题/完全背包/Knapsack
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Knap ...
- dbms_output.put与put_line
BEGIN DBMS_OUTPUT.ENABLE (buffer_size => NULL);--with no limit on the output. dbms_output.put('a' ...
- C语言预处理
1.由源码到可执行程序的过程(1)源码.c->(编译)->elf可执行程序(2)源码.c->(编译)->目标文件.o->(链接)->elf可执行程序(3)源码.c- ...
- Maven-Optional Dependencies & Dependency Exclusion
本文讨论可选依赖和排除依赖. 帮助用户理解它们是什么, 如何使用, 它们如何工作, 以及什么时候使用它们最合适. 本文也将解释为什么排除是基于单个依赖的, 而非POM级别的. Optional De ...
- 【Luogu】P3927 SAC E#1 - 一道中档题 Factorial
[题目]洛谷10月月赛R1 提高组 [题意]求n!在k进制下末尾0的个数,n<=1e18,k<=1e16. [题解]考虑10进制末尾0要考虑2和5,推广到k进制则将k分解质因数. 每个质因 ...
- 实现拷贝函数(strcpy)
#include <stdio.h> #include <stdlib.h> // 函数声明 char *mystrcpy(char *object, char *source ...