案例：ionic案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<html ng-app="ionicApp">
2
<head>
3
<meta charset="utf-8">
4
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
5
<title>W3xue教程(w3xue.com)</title>
6
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
7
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
8
<style>
9
.col{
10
  background-color: #F9FAFB;
11
  padding: 5px;
12
  border: 1px solid #ddd;
13
  border-radius: 2px;
14
  text-align: center;
15
}
16
</style>
17
</head>
18
<body>
19
20
  <div class="bar bar-header">
21
    <div class="h1 title">垂直对齐列</div>
22
  </div>
23
​
24
 <div class="content has-header">
25
​
26
    <div class="row">
27
      <div class="col">
28
        <div class="col-demo">.col</div>
29
      </div>
30
      <div class="col">
31
        <div class="col-demo">.col</div>
32
      </div>
33
      <div class="col">
34
        <div class="col-demo">.col</div>
35
      </div>
36
      <div class="col">
37
        <div class="col-demo">1<br>2<br>3<br>4</div>
38
      </div>
39
    </div>
40
​
41
    <div class="row">
42
      <div class="col col-top">
43
        <div class="col-demo">.col</div>
44
      </div>
45
      <div class="col col-center">
46
        <div class="col-demo">.col</div>
47
      </div>
48
      <div class="col col-bottom">