案例:Bootstrap案例     状态:可编辑再运行    进入横版
x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <title>Bootstrap .clearfix 实例</title>
5
  <meta charset="utf-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1">
7
  <link rel="stylesheet" href="/css/bootstrap/bootstrap3.3.7.min.css">  
8
  <script src="/js/bootstrap/jquery.min.js"></script>
9
  <script src="/js/bootstrap/bootstrap3.3.7.min.js"></script>
10
</head>
11
<body>
12
13
<div class="container-fluid">
14
  <h1>Hello World!</h1>
15
  <div class="row">
16
    <div class="col-xs-6 col-sm-3" style="background-color:lavender;">
17
      列 1<br>
18
      重置窗口大小,查看效果。也尝试删除有 clearfix  的 div 查看效果。
19
    </div>
20
    <div class="col-xs-6 col-sm-3" style="background-color:lavenderblush;">列 2</div>
21
    <!-- Add clearfix for only the required viewport -->
22
    <div class="clearfix visible-xs"></div>
23
    <div class="col-xs-6 col-sm-3" style="background-color:lightcyan;">列 3</div>
24
    <div class="col-xs-6 col-sm-3" style="background-color:lightgray;">列 4</div>

 运行结果 
 北美留学生论坛