示例

可以切换显示的下拉菜单。交互功能使用了 下拉菜单 JavaScript 插件。

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">动作</a></li>
  <li><a tabindex="-1" href="#">剧情</a></li>
  <li><a tabindex="-1" href="#">恐怖</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">更多类型</a></li>
</ul>

代码

上面只是一个下拉菜单，这里是所需要的 HTML。你需要把触发下拉菜单的东西还有下拉菜单本身都放在一个带 .dropdown 类的元素里，或者其它声明了 position: relative; 的元素。

<div class="dropdown">
  <!-- Link or button to toggle dropdown -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">动作</a></li>
    <li><a tabindex="-1" href="#">剧情</a></li>
    <li><a tabindex="-1" href="#">恐怖</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">更多类型</a></li>
  </ul>
</div>

选项

右对齐菜单，还有包含多级别的下拉菜单。

对齐菜单

添加 .pull-right 类到 .dropdown-menu 上， 可以右对齐下拉菜单。

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

禁用菜单选项

添加 .disabled 类到 <li> 上，可以禁用链接。

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">普通的链接</a></li>
  <li class="disabled"><a tabindex="-1" href="#">禁用的链接</a></li>
  <li><a tabindex="-1" href="#">其它的链接</a></li>
</ul>

下拉菜单里的子菜单

为下拉菜单添加一个额外的级别，鼠标悬停时会显示，在下拉菜单里面的 li 标签上添加一个 .dropdown-submenu 类就行了。

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">更多选项</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

示例

两个基本选项，两种变化。

单一按钮组

把一些带有 .btn 类的按钮放在一个带有 .btn-group 类的元素里。

<div class="btn-group">
  <button class="btn">左对齐</button>
  <button class="btn">居中</button>
  <button class="btn">右对齐</button>
</div>

多按钮组

组合多个 <div class="btn-group"> 到一个 <div class="btn-toolbar"> 类的元素里。

<div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>

垂直按钮组

垂直堆砌显示按钮。

<div class="btn-group btn-group-vertical">
  ...
</div>

复选框和单选按钮

按钮组同样可以像单选按钮，也就是只能选中一个，也可能像复选框那样，可以同时选中多少。使用方法可以查看 JavaScript 文档。

按钮组中的下拉菜单

提示！ 为为能正确显示带下拉菜单的按钮，必须用它们自己的.btn-group 包装在 .btn-toolbar 里。

预览与示例

使用按钮来触发一个下拉菜单，可以把它们放在带有 .btn-group 类的元素里。

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    选择类型
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- 下拉菜单的链接 -->
  </ul>
</div>

同样适用所有的按钮尺寸

按钮下拉菜单适用于所有尺寸： .btn-large, .btn-small, 或者 .btn-mini。

需要 JavaScript

带下拉菜单的按钮需要 Bootstrap 下拉菜单插件才能正常工作。

有一些情况，比如在移动设备上，下拉菜单可能会出现在可视窗口之外，你需要自己手工调整对齐。

分离式带下拉菜单的按钮

创建于带下拉菜单链接之上，我们可以很容易创建一个分离式的按钮，按钮左边部是正常的运作，右边部分可以切换显示下拉菜单。

<div class="btn-group">
  <button class="btn">选择类型</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- 下拉菜单链接 -->
  </ul>
</div>

尺寸

使用按钮的尺寸类来调整大小： .btn-mini, .btn-small, 或者 .btn-large

<div class="btn-group">
  <button class="btn btn-mini">选择类型</button>
  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- 下拉菜单链接 -->
  </ul>
</div>

向上弹出的菜单

下拉菜单可以向上弹出，在 .dropdown-menu 类的父元素上添加一个类就可以，它会翻转 .caret (小三角) 的方向，菜单会从下向上弹出。

<div class="btn-group dropup">
  <button class="btn">向上弹出</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- 下拉菜单链接 -->
  </ul>
</div>

轻量化 相同的代码，不同的类

选项卡，pills，列表，所有这些导航组件都会使用同样的代码和来自 .nav 类的样式。

基本选项卡

使用一般的 <ul> 和链接，再加上一个 .nav-tabs 类：

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">首页</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

基本 pills

使用同样的 HTML，不过使用 .nav-pills 代替：

<ul class="nav nav-pills">
  <li class="active">
    <a href="#">首页</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

禁用的状态

在任何导航组件 (选项卡，pills，链接)上，添加一个 .disabled 类，可以把链接变成灰色并且去掉了悬停效果，链接依然可以点击，除非你去掉了 href 属性。你可以用点 JavaScript 做到。

<ul class="nav nav-pills">
  ...
  <li class="disabled"><a href="#">首页</a></li>
  ...
</ul>

组件对齐

使用 .pull-left 或者 .pull-right 类可以改变导航组件的对齐方式。

可堆砌

选项卡与 pills 默认会水平显示，再添加一个 .nav-stacked 类可以让它们堆砌在一起显示。

堆砌在一起的选项卡

<ul class="nav nav-tabs nav-stacked">
  ...
</ul>

堆砌在一起的 pills

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

下拉菜单

加点额外的 HTML，配合 下拉菜单 JavaScript 插件，可以添加一个下拉菜单。

带下拉菜单的选项卡

<ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        选项类型
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- links -->
    </ul>
  </li>
</ul>

带下拉菜单的 pills

<ul class="nav nav-pills">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        选择类型
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- 链接 -->
    </ul>
  </li>
</ul>

导航链接

创建导航链接组，每个链接组可以添加个标题。把这它们用在边栏上是不错的选择。

导航链接示例

找一个列表链接，添加一个 class="nav nav-list"：

<ul class="nav nav-list">
  <li class="nav-header">主导航</li>
  <li class="active"><a href="#">首页</a></li>
  <li><a href="#">电影</a></li>
  ...
</ul>

注意 在导航列表里使用嵌套，使用在嵌套的 <ul> 上添加 class="nav nav-list" 。

水平分隔符

使用空白的带有 .divider 类的列表元素可以添加一个分隔符，像这样：

<ul class="nav nav-list">
  ...
  <li class="divider"></li>
  ...
</ul>

可以切换显示的选项卡

让选项卡真正可以来回切换显示，你需要使用 Bootstrap 的 JavaScript 选项卡插件，你可以控制选项卡的位置：项部（默认），右边，底部，左边。

示例

让选项卡可以切换显示，用一个拥有唯一 id 的 .tab-pane 类元素来包装 .tab-content 类的元素。

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

渐变的选项卡

为每个 .tab-pane 添加一个 .fade 类，可以添加一个渐变效果。

需要的 jQuery 插件

在 JavaScript 文档里学习一下选项卡插件的使用。

各种方向的选项卡

底部选项卡

翻转 HTML 的顺序，然后添加一个额外的 CSS 类，就可以把选项卡放在底部显示了。

<div class="tabbable tabs-below">
  <div class="tab-content">
    ...
  </div>
  <ul class="nav nav-tabs">
    ...
  </ul>
</div>

左边选项卡

修改使用的 CSS 类，可以把选项卡放在左边显示。

<div class="tabbable tabs-left">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

右边选项卡

修改使用的 CSS 类，可以让选项卡在右边显示。

<div class="tabbable tabs-right">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

基本的导航栏

默认导航栏并不会固定在顶部显示，它会带项目名称和基本的导航链接，你可以把它放在任何带有 .container 类的元素里面，也就是设置了内容宽度的元素。

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">标题</a>
    <ul class="nav">
      <li class="active"><a href="#">首页</a></li>
      <li><a href="#">电影</a></li>
      <li><a href="#">美剧</a></li>
    </ul>
  </div>
</div>

导航栏组件

品牌

显示你的品牌或者项目名称的链接文字。

<a class="brand" href="#">项目名称</a>

导航链接

导航菜单里的项目就是简单的无序列表。

<ul class="nav">
  <li class="active">
    <a href="#">首页</a>
  </li>
  <li><a href="#">电影</a></li>
  <li><a href="#">美剧</a></li>
</ul>

你可以使用带简单 CSS 类的空白项目分隔导航。像这样：

<ul class="nav">
  ...
  <li class="divider-vertical"></li>
  ...
</ul>

表单

在导航栏上使用合适的样式和位置显示表单，可以添加下面这些 CSS 类。默认表单会包含 .navbar-form 类，对齐可以使用.pull-left 或者 .pull-right 。

<form class="navbar-form pull-left">
  <input type="text" class="span2">
  <button type="submit" class="btn">提交</button>
</form>

搜索表单

添加 .navbar-search 到表单上，还有添加 .search-query 到 input 上，可以得到特别的样式。

<form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="搜索">
</form>

组件对齐

对齐导航链接，搜索表单，或者得文字，可以使用 .pull-left 或者 .pull-right 类。这两个类可以添加特定的浮动方向。

使用下拉菜单

使用点标签再加上 下拉菜单 JavaScript 插件，可以在导航菜单中添加下拉菜单。

<ul class="nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      帐户
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

详细的使用方法可以查看 JavaScript 下拉菜单文档

文字

把文字放在 .navbar-text 类的元素里，使用 <p> 标签得到合适的大小与颜色。

可选显示变化

让导航栏显示在窗口最上方，可以在最外层 div 上添加一个 .navbar 类。

固定在顶部

添加 .navbar-fixed-top 类，你要考虑在它下面的区域的边距，有可能会被导航栏挡住，所以，你至少在 <body> 上添加一个 40px 的 padding 。确定把它添加到核心的 Bootstrap CSS 之后，可选响应式 CSS 之前。

<div class="navbar navbar-fixed-top">
  ...
</div>

固定在底部

使用一个 .navbar-fixed-bottom 类。

<div class="navbar navbar-fixed-bottom">
  ...
</div>

静态顶部导航栏

滚动页面导航栏也会随着滚动，可以使用一个 .navbar-static-top 类。不像 .navbar-fixed-top 类，你不需要给 body 添加额外的边距。

<div class="navbar navbar-static-top">
  ...
</div>

响应式的导航栏

把折叠后显示的按钮放在 .btn-navbar 类的元素里，再把导航栏内容用一个带有 .nav-collapse.collapse 类的 div 包装一下。

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar 用来切换显示被折叠的导航内容 -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- 想要显示的品牌名称 -->
        <a class="brand" href="#">项目名称</a>

      <!-- 940px 或以下要隐藏的东西，可以放在这里 -->
      <div class="nav-collapse collapse">
        <!-- .nav, .navbar-search, .navbar-form, 等等 -->
      </div>

    </div>
  </div>
</div>

暗色导航

修改导航栏的样式，可以添加一个 .navbar-inverse 类。

<div class="navbar navbar-inverse">
  ...
</div>

示例

示例显示了面包屑在多个页上可能的显示

<ul class="breadcrumb">
  <li><a href="#">首页</a> <span class="divider">/</span></li>
  <li><a href="#">电影</a> <span class="divider">/</span></li>
  <li class="active">喜剧</li>
</ul>

标准分页

适用于应用程序或者搜索结果上面，很容易点击。

<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>

选项

禁用与激活状态

分页上的链接可以根据情况来定制，要不可用的链接上使用 .disabled 类，在当前页面上使用 .active 类。

<div class="pagination">
  <ul>
    <li class="disabled"><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    ...
  </ul>
</div>

你可以在禁用或者激活的锚上，把 a 标签替换成 span 标签，这样它们就不能点击了。

<div class="pagination">
  <ul>
    <li class="disabled"><span>&laquo;</span></li>
    <li class="active"><span>1</span></li>
    ...
  </ul>
</div>

尺寸

大号可以使用 .pagination-large 类，小号可以用 .pagination-small 类，或者迷你型可以用 .pagination-mini 。

<div class="pagination pagination-large">
  <ul>
    ...
  </ul>
</div>
<div class="pagination">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-small">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-mini">
  <ul>
    ...
  </ul>
</div>

对齐

分页有两种对齐方式： .pagination-centered （居中），还有 .pagination-right （右对齐）。

<div class="pagination pagination-centered">
  ...
</div>

<div class="pagination pagination-right">
  ...
</div>

小分页

简单的分页，比如 上一页 或 下一页。适用于小型的博客或杂志。

默认示例

默认会居中显示。

<ul class="pager">
  <li><a href="#">上一页</a></li>
  <li><a href="#">下一页</a></li>
</ul>

两端对齐

显示在两边

<ul class="pager">
  <li class="previous">
    <a href="#">&larr; 上一页</a>
  </li>
  <li class="next">
    <a href="#">下一页 &rarr;</a>
  </li>
</ul>

可选的禁用状态

小分页可以使用 .disabled 类，来显示禁用的状态。

<ul class="pager">
  <li class="previous disabled">
    <a href="#">&larr; 上一页</a>
  </li>
  ...
</ul>

标签

徽章

自动隐藏

当标签和徽章里没有东西的时候，会自动隐藏起来。 ( 通过 CSS 的 :empty 选择器 )。

Hero 单元

轻量，灵活的显示网站主要内容的组件。比如适合用在营销类型的网站上。

<div class="hero-unit">
  <h1>大标题</h1>
  <p>小标语</p>
  <p>
    <a class="btn btn-primary btn-large">
      了解更多
    </a>
  </p>
</div>

页头

在 h1 标签上添加一些边距，还有一条下边灰色实线，可以区分页面的不同部分，可以使用 small 标签标记大标题的子标题。

<div class="page-header">
  <h1>什么是 WordPress <small>是什么，能做什么</small></h1>
</div>

默认的缩略图

默认情况下，Bootstrap 的缩略图是使用最少的代码来显示带链接的图像。

可定制

加上点额外的代码，你可以把多种 HTML 内容放在缩略图里，比如标题，段落，按钮等等。

为什么使用缩略图

缩略图很适合用在使用网格来显示视频，图像，商品，作品等等。

简单，灵活

缩略图只需要使用一个 ul，里面可以使用任意数量的 li 元素包装内容。它非常灵活，可以包装很多种内容。

使用网格栏

缩略图使用已有的网格系统类来控制缩略图的尺寸，像 .span2 或 .span3 等等。

代码

就像上面说的一样，使用缩略图的代码很简单，下面是一个带链接的图像的缩略图：

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
    </a>
  </li>
  ...
</ul>

在缩略图里添加其它类型的内容，代码只需要简单修改一下，把 <a> 替换成 <div> ，像这样：

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
      <h3>缩略图标签</h3>
      <p>缩略图描述...</p>
    </div>
  </li>
  ...
</ul>

更多示例

你可以混合使用网格类。

默认的警示

把警示内容连同可选的关闭按钮放在 .alert 类的元素里。

<div class="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>警告！</strong> 出门之前一定带钥匙。
</div>

关闭按钮

移动版 Safari 和移动版 Opera 浏览器，想要使用 data-dismiss="alert" 属性，需要在关闭所在的 <a> 标签上，添加一个 href="#" 属性。

<a href="#" class="close" data-dismiss="alert">&times;</a>

你也可以使用带 data 属性的 <button> 元素， 当使用 <button> 元素的时候，你需要添加一个 type="button"，不然关闭按钮可能不会起作用。

<button type="button" class="close" data-dismiss="alert">&times;</button>

通过 JavaScript 关闭警示信息

使用 jQuery 警示插件，可以让警示信息可以关闭。

选项

比较长的信息，可以在警示信息的包装上添加 .alert-block，它可以添加一些内边距。

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <h4>警告！</h4>
  老婆永远是对的，如果你还没准备好...
</div>

应用情境

添加额外的 CSS 类可以改变警示信息的意义。

错误或危险

<div class="alert alert-error">
  ...
</div>

成功

<div class="alert alert-success">
  ...
</div>

信息

<div class="alert alert-info">
  ...
</div>

示例与代码

基本

垂直渐变的默认进度条。

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

条纹

使用了渐变的条纹效果进度条，不适用于 IE7-8 浏览器上。

<div class="progress progress-striped">
  <div class="bar" style="width: 20%;"></div>
</div>

动画

在 .progress-striped 上再添加一个 .active 类，可以添加一个动画效果。在所有 IE 浏览器都不适用。

<div class="progress progress-striped active">
  <div class="bar" style="width: 40%;"></div>
</div>

堆砌

在同一个 .progress 上堆砌显示多个进度栏。

<div class="progress">
  <div class="bar bar-success" style="width: 35%;"></div>
  <div class="bar bar-warning" style="width: 20%;"></div>
  <div class="bar bar-danger" style="width: 10%;"></div>
</div>

选项

其它额外

进度条也使用了类似按钮和警示一样的 CSS 类来改变样式。

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

条纹

这是带条纹的进度条。

<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>

浏览器支持

进度条使用了 CSS3 的渐变，过渡，还有动画来达到它的效果。这些东西在低版本的 Firefox 和 IE 浏览器上都不支持。

IE 10 和 Opera 12 不支持动画。

左边或右边显示一个小图像，紧跟着还有一小段文字。可以用在评论，内容列表块上。

默认示例

默认可以把媒体对象里的多媒体（图像，视频）浮动到内容区块的左边或者右边。

肖申克的救赎 The Shawshank Redemption (1994)

银行家安迪因被当作杀害妻子与情夫的凶手，被判终身监禁。安迪在监狱中一方面帮监狱长做假账，一方面精心策划了一出越狱好戏。

盗梦空间 Inception (2010)

本片被定义为“发生在意识结构内的当代动作科幻片”，诺兰继《黑暗骑士》后再次给我们带来惊喜，带观众游走于梦境与现实之间。

《 帝国 》对影片的评论

这部影片就像是《黑客帝国》加上《纽约提喻法》，反物理学的探讨、精彩的动作场面、具有冲击力的情感、以及莱昂纳多令人吃惊的表演，都让人沉迷不已，这是诺兰电影的一个全新领域。

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" data-src="holder.js/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...

    <!-- 嵌套的多媒体对象 -->
    <div class="media">
      ...
    </div>
  </div>
</div>

多媒体列表

再加上代码，可以把多媒体对象放在列表里（适用于评论或者文章列表）。

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...

      <!-- 嵌套的多媒体对象 -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

Wells

Well 可以为元素添加一个灰色背景和边框，还有一个内部阴影效果。

<div class="well">
  ...
</div>

可选类

控制边距和圆角的两个类。

<div class="well well-large">
  ...
</div>

<div class="well well-small">
  ...
</div>

关闭图标

可以用于关闭对话框，警示信息的小图标。

<button class="close">&times;</button>

如果你想用 a 标签的话，在 iOS 设备需要添加一个 href="#" 才能点击。

<a class="close" href="#">&times;</a>

辅助类

一些用来修改小显示或行为的简单实用的 CSS 类。

.pull-left

浮动元素到左边

class="pull-left"

.pull-left {
  float: left;
}

.pull-right

浮动元素到右边

class="pull-right"

.pull-right {
  float: right;
}

.muted

把元素的颜色设置成 #999

class="muted"

.muted {
  color: #999;
}

.clearfix

清查任何元素的 float （浮动）

class="clearfix"

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}