Bootstrap 布局容器 key:container container-fluid - Bootstrap CSS 概览

Bootstrap 布局容器


布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套。

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

  1. <div class="container"> 
  2.   ... 
  3. </div> 

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

  1. <div class="container-fluid"> 
  2.   ... 
  3. </div>

 

Bootstrap 3 的 container class 用于包裹页面上的内容。让我们一起来看看 bootstrap.css 文件中的这个 .container class

  1. .container { 
  2.    padding-right15px
  3.    padding-left15px
  4.    margin-rightauto
  5.    margin-leftauto

通过上面的代码,把 container 的左右外边距(margin-right、margin-left)交由浏览器决定。

请注意,由于内边距(padding)是固定宽度,默认情况下容器是不可嵌套的。

  1. .container:before, 
  2. .container:after { 
  3.   display: table; 
  4.   content" "

这会产生伪元素。设置 display 为 table,会创建一个匿名的 table-cell 和一个新的块格式化上下文。:before 伪元素防止上边距崩塌,:after 伪元素清除浮动。

如果 conteneditable 属性出现在 HTML 中,由于一些 Opera bug,围绕上述元素创建一个空格。这可以通过使用 content: " " 来修复。

  1. .container:after { 
  2.   clearboth

它创建了一个伪元素,并确保了所有的容器包含所有的浮动元素。

Bootstrap 3 CSS 有一个申请响应的媒体查询,在不同的媒体查询阈值范围内都为 container 设置了max-width,用以匹配网格系统。

  1. @media (min-width768px) { 
  2.    .container { 
  3.       width750px

 

没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)