避免跨浏览器的不一致

Bootstrap 使用 Normalize 来建立跨浏览器的一致性。

 

Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。

 

容器（Container）

<div class="container">

  ...

</div>

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

 

.container {

   padding-right: 15px;

   padding-left: 15px;

   margin-right: auto;

   margin-left: auto;

}

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

 

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

 

.container:before,

.container:after {

  display: table;

  content: " ";

}

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

 

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

 

.container:after {

  clear: both;

}

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

 

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

 

@media (min-width: 768px) {

   .container {

      width: 750px;

}