文档章节

.container 与.container-fluid的区别

周宇YuZhou
 周宇YuZhou
发布于 2015/04/02 12:11
字数 130
阅读 20
收藏 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
粉丝 16
博文 40
码字总数 17591
作品 0
技术主管
Bootstrap---Fluid layout 流布局

流布局是一种适应屏幕的做法。即不固定块的宽度,而是采用百分比作为单位来确定每一块的宽度。这种布局非常适合一次编写,然后自适应各种不同大小的屏幕(手机,PAD…)。 <div class="cont...

娲城小将
2014/08/25
0
0
使用Boostrap,左侧菜单栏固定宽度,右侧自适应宽度。

1、需求和问题 因为Bootstrap框架是自适应布局的。所以当把菜单栏放在 .col-*-n 的时候。菜单栏会根据浏览器窗口的大小进行缩放调整。从而会产生很多问题。比如与头部导航栏对齐的问题。比如...

Asktao
2016/04/05
3.2K
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
819
6
bootstrap入门1

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

小昭归来
2016/10/11
1
0

没有更多内容

加载失败,请刷新页面

加载更多

数字转换为字符的L受哪个参数影响

我们知道,如果想把金额带上本位币,一般加上L, 比如: select to_char(salary,'L99,9999.00') from employees; 下面显示如下: SALARY TO_CHAR(SALARY,'L99, 2900 ¥2,900.00 2500 ¥2,500.00 ...

tututu_jiang
4分钟前
0
0
shell编程(告警系统主脚本、告警系统配置文件、告警系统监控项目)

告警系统主脚本 先定义监控系统的各个目录,然后再去定义主脚本,因为是分布式的,所以需要每台机器都这样做,如果事先有创建好各个目录和各个脚本,那么就可以把这些目录和脚本copy到其他机...

蛋黄_Yolks
5分钟前
0
0
SAP HANA Backup and Recovery

SAP HANA Backup and Recovery Skip to end of metadata Created by Paul Power, last modified on Nov 23, 2017 Go to start of metadata Purpose System Privileges How to Perform a Back......

rootliu
7分钟前
0
0
JVM的持久代——何去何从?

本文会介绍一些JVM内存结构的基本概念,然后很快会讲到持久代,来看下Java SE 8发布后它究竟到哪去了。 基础知识 JVM只不过是运行在你系统上的另一个进程而已,这一切的魔法始于一个java命令...

java知识分子
23分钟前
0
0
Hive和HBase的区别

hive是文件的视图,hbase是建了索引的key-value表。 先放结论:Hbase和Hive在大数据架构中处在不同位置,Hbase主要解决实时数据查询问题,Hive主要解决数据处理和计算问题,一般是配合使用。...

飓风2000
30分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部