bootstrap3中container与container_fluid外层容器的区别讲解

.container与.container_fluid是bootstrap中的两种不同类型的外层容器，按照官方的说法，这两者的区别是：

　　.container 类用于固定宽度并支持响应式布局的容器。

　　.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

所谓固定宽度并不是允许开发者自己设置容器的宽度，而是bootstrap内部根据屏幕宽度利用媒体查询，帮我们设置了固定宽度，并且是能够自适应的。

度，并且是能够自适应的。无论何种情况下，请不要手动为响应式布局中的外层布局容器设置固定宽度值。

.container-fluid自动设置为外层视窗的100%，如果外层视窗为body，那么它将全屏显示，无论屏幕大小，并且自动实现响应式布局。

以下是借鉴来的代码，仅供参考：

/*0-768px以上宽度container为100%*/
.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}
/*768-992px以上宽度container为750px*/
@media (min-width: 768px) {
 .container {
 width: 750px;
 }
}
/*992-1200px以上宽度container为970px*/
@media (min-width: 992px) {
 .container {
 width: 970px;
 }
}
/*1200px以上宽度container为1170px*/
@media (min-width: 1200px) {
 .container {
 width: 1170px;
 }
}
/*container-fluid为100%*/
.container-fluid {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}

总结

以上所述是小编给大家介绍的bootstrap3中container与container_fluid外层容器的区别讲解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • bootstrap3中container与container_fluid外层容器的区别讲解

    .container与.container_fluid是bootstrap中的两种不同类型的外层容器,按照官方的说法,这两者的区别是: .container 类用于固定宽度并支持响应式布局的容器. .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器. 所谓固定宽度并不是允许开发者自己设置容器的宽度,而是bootstrap内部根据屏幕宽度利用媒体查询,帮我们设置了固定宽度,并且是能够自适应的. 度,并且是能够自适应的.无论何种情况下,请不要手动为响应式

  • JavaScript中.min.js和.js文件的区别讲解

    Q&A Q: .js和.min.js文件分别是什么? A: .js是JavaScript 源码文件, .min.js是压缩版的js文件. Q:为什么要压缩为.min.js文件? 减小体积  .min.js文件经过压缩,相对编译前的js文件体积较小,传输效率快. 防止窥视和窃取源代码  经过编码将变量和函数原命名改为毫无意义的命名,以防止他人窥视和窃取 js 源代码 Q:.js 和.min.js文件的优缺点? .js文件:   优点: 可读性较好,易于debug和更改.   缺点:体积较大,传输时

  • Laravel 6.2 中添加了可调用容器对象的方法

    Laravel小组上周发布了v6.2.0 ,其中包含 针对已登录用户的新的密码确认流程以及可调用的容器对象.现在,让我们去了解一些尚未发布的一些其他新功能,在发行说明中表示已经可以使用: 首先,Container::call 现在支持可调用对象.下面是pull请求的测试,它演示了它的工作原理: class ContainerCallCallableStub { public function __invoke(ContainerCallConcreteStub $stub, $default =

  • JAVA WEB中Servlet和Servlet容器的区别

    Servlet 很多同学可能跟我一样始终没有搞清楚到底什么是 Servlet,什么是 Servlet 容器.网上看了很多帖子,或许人家说的很清楚,但是自己的那个弯弯就是拐不过来. 想了很久说一下自己的理解. Java web 开发中为啥要有 Servlet 呢?是否可以不要. web开发的本质就一句话:客户端和服务器交换数据.于是你使用 Java 的 Socket 套接字进行编程,去处理客户端来的 tcp 请求,经过编解码处理读取请求体,获取请求行,然后找到请求行对应的处理逻辑步入服务器的处理中

  • Docker中 container 和 image 的命名

    目录 1. 容器命名 使用 --name 自定义容器名称 2. image 命名 image 命名使用 --tag 或者 -t 1. 容器命名 创建容器时,如果不用 --name 指定名称,那么container的名称将自动生成. 使用 --name 自定义容器名称 docker run --name "node_server" -d -p 80:80 node_server_debug 可以看到生成的名称为node_server 的容器. PS D:\nodejs-app> d

  • BootStrap3中模态对话框的使用

    1.引入jQuery.min.js: 2.引入bootstrap-modal.js: 3.操作按钮:<a href="#edit" data-toggle="modal">修改</a> 4.模态框 <div class="modal fade" id="edit"> <div class="modal-dialog "> <div class="

  • Java中具有映射关系的容器:数组和Map的区别说明

    映射就意味着有两部分: 存储映射关系的容器是数组和Map集合: 区别: (1)当映射关系中的一方是有序编号时,这个时候要想到数组这种结构: (2)Map不一定需要有序编号,它只能建立对象之间的关系: (3)如果映射的两方没有任何一方是有序的编号,就不能想数组了,这时应该用集合中具备映射关系的容器Map. 注意: (1)Map中键相同时,键值会被覆盖: (2)Map中一个Key可以对应一个集合,因为集合也是一个对象,集合也能往集合中放. (3)Map<int,char>这样写是不正确的,因为,泛

  • springboot中如何使用minio存储容器

    springboot中如何使用minio存储容器

    目录 docker运行 java导包 配置文件 操作 本地浏览设置 总结 docker运行 docker run -p 9000:9000 -p 9001:9001 -v /mydata/minio/data:/data minio/minio server /data --console-address ":9001 java导包 最好是这个版本,其他版本尝试过都出bug了 <dependency> <groupId>io.minio</groupId> &

  • C++中不得不说的map容器

    目录 前言 1,map基本概念 2,map构造和赋值 3,大小和交换 4,插入和删除 5,查找和统计 6,排序 总结 前言 为什么这两天在研究C++的容器呢,因为刷题的时候碰见了几个不擅长的题,得用STL中的几种容器才能解出来,所以也是动力满满呀,希望能尽快转过头去把那几个题给写出来,哈哈哈,当然,解题思路和过程后续我也会分享出来.话不多说,老规矩, 使用map容器要包含头文件#include<map> 1,map基本概念 简介: map中所有元素都是pair(成对出现的数) pair中第一个

  • fragment中的add和replace方法的区别浅析

    使用 FragmentTransaction 的时候,它提供了这样两个方法,一个 add , 一个 replace ,对这两个方法的区别一直有点疑惑. 我觉得使用 add 的话,在按返回键应该是回退到上一个 Fragment,而使用 replace 的话,那个别 replace 的就已经不存在了,所以就不会回退了.但事实不是这样子的.add 和 replace 影响的只是界面,而控制回退的,是事务. public abstract FragmentTransaction add (int con

随机推荐