bootstrap记录 

 1 <div class="container">
 2             <h1>
 3              Hello,world!
 4          </h1>
 5             <div class="row">
 6                 <div class="col-lg-2">
 7                     <h2 class="page-header">
 8              区域一
 9          </h2>
10                     <p>
11                         Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
12                     </p>
13                 </div>
14                 <div class="col-lg-6">
15                     <h2 class="page-header">
16             区域二
17         </h2>
18                     <p>
19                         Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
20                     </p>
21                 </div>
22                 <div class="col-lg-4">
23                     <h2 class="page-header">
24             区域三
25         </h2>
26                     <p>
27                         Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
28                     </p>
29                 </div>
30             </div>
31         </div>
32 当使用.col-lg-*的时候表示在大屏幕中是按照单行显示,全部显示在一行,在屏幕缩小到阈值的时候就变成多行显示,如果设置为.col-sm-*时,因为规定了在小屏幕显示的时候是单行显示,所以无论怎样拖动屏幕的大小都是单行显示.
View Code

使用row一般需要container的包围

 

 

 

1 <div class="row">
2                 <div class="col-xs-12 col-md-8">1
3                 </div>    
4                 <div class="col-xs-6 col-md-4">
5                     2
6                 </div>
7             </div>
View Code

这样的代码可以控制在中等屏幕的时候显示在一行,在屏幕变小的时候显示两行

列偏移 col-md-offset-4

posted @ 2018-03-15 09:56  余***龙  阅读(183)  评论(0)  编辑  收藏  举报