文档章节

.container 与.container-fluid的区别

周宇YuZhou
 周宇YuZhou
发布于 2015/04/02 12:11
字数 130
阅读 21
收藏 0

从下面的代码可以看出两者的区别:

@media (min-width: 568px) {
  .container {
    width: 550px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

根据见面的视窗大小,container给div指定了固定的宽度,如果当前视窗是1000px(>992px),因而它限定的宽度就是970px,当视窗宽度增加直到1200px时,它限定的宽度会跳到1170px。

而类似的限制没有应用在container-fluid上,因此它的宽度是随着视窗改变而改变的。

© 著作权归作者所有

共有 人打赏支持
周宇YuZhou
粉丝 15
博文 40
码字总数 17591
作品 0
技术主管
私信 提问
bootstrap入门1

作为back-end也用了一段时间的bt,但是对其或者说对front-end就不是特别了解,在从新学习之际,写此已做记录。 1 container, container-fluid 两个最基本要素是相同的,只不过container添加了...

小昭归来
2016/10/11
1
0
关于container-fluid 100%的宽依赖的参考是什么

container-fluid它是整个屏幕的100%吗?它是以浏览器屏幕为参考值吗?那它这个参考值是否可人为设置,比如我希望它一直都是屏幕一半的100%呢?

jscool
2016/04/05
249
0
我的css为什么没有运用到我的网页中去

我的html file里面有写 这是我radmin-responsive.css里的一小部分: @media (min-width: 980px) and (max-width: 1200px) { div.container-fluid.content-wrapper { padding-right: 17px; }......

milktwpearl
2013/07/01
837
6
移动web开发———第三天

一、响应式开发 1、响应式布局, 就是一个网站能够兼容多个终端。 2、响应式开发的原理 CSS3中的Media Query(媒介查询,and之后一定要加空格@media screen and (min-width: 768px) and (max...

我是小谷粒
2018/02/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 白掌柜说了卖货不卖身

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @爱漫爱 :这是一场修行分享羽肿的单曲《Moony》 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :开不开心? 开心呀, 我又不爱睡懒觉…...

小小编辑
今天
7
0
大数据教程(11.7)hadoop2.9.1平台上仓库工具hive1.2.2搭建

上一篇文章介绍了hive2.3.4的搭建,然而这个版本已经不能稳定的支持mapreduce程序。本篇博主将分享hive1.2.2工具搭建全过程。先说明:本节就直接在上一节的hadoop环境中搭建了! 一、下载apa...

em_aaron
今天
2
0
开始看《JSP&Servlet学习笔记》

1:WEB应用简介。其中1.2.1对Web容器的工作流程写得不错 2:编写Servlet。搞清楚了Java的Web目录结构,以及Web.xml的一些配置作用。特别是讲了@WebServlet标签 3:请求与响应。更细致的讲了从...

max佩恩
今天
4
0
mysql分区功能详细介绍,以及实例

一,什么是数据库分区 前段时间写过一篇关于mysql分表的的文章,下面来说一下什么是数据库分区,以mysql为例。mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下面(可...

吴伟祥
今天
3
0
SQL语句查询

1.1 排序 通过order by语句,可以将查询出的结果进行排序。放置在select语句的最后。 格式: SELECT * FROM 表名 ORDER BY 排序字段ASC|DESC; ASC 升序 (默认) DESC 降序 1.查询所有商品信息,...

stars永恒
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部