我们不希望相邻的两个列紧靠在一起

网格系统——列偏移、列排序、列嵌套

 

列偏移:一部分时候,我们不希望相邻的多个列紧靠在一齐,但又不想利用margin可能其余的技艺花招来。那个时候就能够利用列偏移(offset)功能来落实。使用列偏移也非常简单,只供给在列成分上增添类名“col-md-offset-*”(当中星号代表要偏移的列组合数),那么富有这一个类名的列就能够向右偏移。举例,你在列成分上充裕“col-md-offset-4”,表示该列向右移动4个列的肥瘦。

图片 1图片 2

<div >    <div >    <div >.col-md-4</div>    <div >列向右移动四列的间距</div>    <div >.col-md-3</div>    </div>    <div >    <div >.col-md-4</div>    <div >列向右移动四列的间距</div>    </div>    </div>

列偏移

注意:但是有七个细节需求留意,使用”col-md-offset-*”对列进行向右偏移时,要保障列与偏移列的总额不超越12,不然会致列断行呈现,如:

图片 3图片 4

<div >      <div >.col-md-3</div>      <div >col-md-offset-3</div>      <div >col-md-4</div>    </div>

列偏移断裂

上边代码中列和偏移列总量为3 3 3 4 = 13>12,所以爆发了列断行。

如上边的演示代码,获得的功力如下:                      

图片 5

 

列排序:列排序其实正是改动列的趋向,便是改动左右转移,何况安装浮动的距离。在Bootstrap框架的网格系统中是透过丰裕类名“col-md-push-*”和“col-md-pull-*” (在那之中星号代表活动的列组合数)。大家来看三个简短的演示:

图片 6图片 7

<div >      <div >        <div >.col-md-4</div>        <div >.col-md-8</div>      </div>    </div>

列排序

私下认可情形之下,下面的代码效果如下:

图片 8

假诺要互交换一下地方置,须求将“col-md-4”向右移动8个列的距离,约等于8个offset ,也正是在“<div class=“col-md-4”>”增加类名“col-md-push-8”,调用其样式。也要将“col-md-8”向左移动4个列的相距,相当于4个offset,在“<div class=”col-md-8”>”上增多类名“col-md-pull-4”,代码及职能如下:

图片 9图片 10

<div >      <div >        <div >.col-md-4</div>        <div >.col-md-8</div>      </div>    </div>

列排序(交流个地点置)

 图片 11

 

列嵌套:您能够在二个列中加多几个照旧五个行(row)容器,然后在这几个行容器中插入列(像前边介绍的一样使用列)。但在列容器中的行容器(row),宽度为百分之百时,便是眼前外界列的宽度。来看贰个轻松示例:

图片 12图片 13

<div >        <div >            <div >            我的里面嵌套了一个网格                <div >                <div >col-md-6</div>                <div >col-md-6</div>              </div>            </div>        <div >col-md-4</div>        </div>        <div >            <div >.col-md-4</div>        <div >        我的里面嵌套了一个网格            <div >              <div >col-md-4</div>              <div >col-md-4</div>              <div >col-md-4</div>            </div>        </div>        </div>    </div>

列嵌套

代码得到如下效果图:

 图片 14

留意:嵌套的列总的数量也急需依照不当先12列。不然会招致倒数一位列换行展现。


本文由金沙澳门官网-www.js333com-金沙js333com发布于金沙澳门官网计算机,转载请注明出处:我们不希望相邻的两个列紧靠在一起

您可能还会对下面的文章感兴趣: