Bootstrap季篇.Bootstrap网格系统偏移列和嵌套列

偏移列:

在bootstrap网格系统中我们得以下偏移列来上为有列右变的功效,如下所示:

<div class=”row”>

        <div class=”col-sm-2 col-sm-offset-1″>col2</div>

 

</div>

Class=”col-sm-2
col-sm-offset-1”表示该列占少数卖,并且于右侧走一客,看到的成效如下:

 Bootstrap 1

 

Col-sm-offset-1表示右变一客。Col-sm-offset-2意味右变两份依次类推。Col-xs类不支持偏移列,但是她可以经简单的施用一个拖欠的只是元格来齐效果。

嵌套列:

咱俩可以在内容遭嵌套网格,如下所示:

<div class=”row”>

        <div class=”col-sm-4″>

            <div class=”row”>

                <div class=”col-sm-2″>col</div>

                <div class=”col-sm-10″>col</div>

            </div>

        </div>

        <div class=”col-sm-8″ style=”min-height:350px”>

            <div class=”row”>

                <div class=”col-sm-3″>col3</div>

                <div class=”col-sm-9″>col4</div>

            </div>

        </div>

外层是一个一行简单排的网格,第一排占4卖,第二列占8卖,在首先排列被以嵌套了一个一行简单排的网格,第一列占2卖,第二排列占10客。显示力量如下:

 Bootstrap 2

 

 

相关文章