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-*时,因为规定了在小屏幕显示的时候是单行显示,所以无论怎样拖动屏幕的大小都是单行显示.
使用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>
这样的代码可以控制在中等屏幕的时候显示在一行,在屏幕变小的时候显示两行
列偏移 col-md-offset-4