4-4 列偏移
本节编程练习不计算学习进度,请电脑登录imooc.com操作

列偏移

有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移(offset)功能来实现。使用列偏移也非常简单,只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
<div class="col-md-2">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
</div>
</div>

如上面的示例代码,得到的效果如下或在最右侧结果窗口中可以看到(鼠标移到结果窗口,单击出现的全屏按钮):

实现原理非常简单,就是利用十二分之一(1/12)的margin-left。然后有多少个offset,就有多少个margin-left。在bootstrap.css中第1205行~1241行所示:

  .col-md-offset-12 {
   margin-left: 100%;
}
  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-0 {
    margin-left: 0;
  }

注意:

不过有一个细节需要注意,使用”col-md-offset-*”对列进行向右偏移时,要保证偏移列的总数不超过12,不然会致列断行显示,如:

<div class="row">
  <div class="col-md-3">.col-md-3</div>
  <div class="col-md-3 col-md-offset-3">col-md-offset-3</div>
  <div class="col-md-4">col-md-4</div>
</div>

上面代码中列和偏移列总数为3+3+3+4 = 13>12,所以发生了列断行。

如上面的示例代码,得到的效果如下或在最右侧结果窗口中可以看到(鼠标移到结果窗口,单击出现的全屏按钮):

 

任务

我来试试:制作一个网格

要求:

1、一个有4列网格。

2、第一列网格占2格宽不偏移。

3、第二列、第三列网格占2格宽,并且偏移1个网格。

4、第四列网格占3格宽,并且偏移1个网格。

效果图如下:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>列偏移</title>
  6. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  7. <link rel="stylesheet" href="style.css">
  8. </head>
  9.  
  10. <body>
  11. <div class="container">
  12. <h4>列向右移动四列的间距</h4>
  13. <div class="row">
  14. <div class="col-md-4">.col-md-4</div>
  15. <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
  16. <div class="col-md-2">.col-md-3</div>
  17. </div>
  18. <div class="row">
  19. <div class="col-md-4">.col-md-4</div>
  20. <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
  21. </div>
  22. </div>
  23. <br />
  24. <h4>发生行断裂</h4>
  25. <div class="container">
  26. <div class="row">
  27. <div class="col-md-4">.col-md-4</div>
  28. <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
  29. <div class="col-md-2">.col-md-3</div>
  30. </div>
  31. <div class="row">
  32. <div class="col-md-4">.col-md-4</div>
  33. <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
  34. </div>
  35. <div class="row">
  36. <div class="col-md-3">.col-md-3</div>
  37. <div class="col-md-3 col-md-offset-3">col-md-offset-3</div>
  38. <div class="col-md-4">col-md-4</div>
  39. </div>
  40. </div>
  41.  
  42. </body>
  43. </html>
  1. [class *= col-]{
  2. background-color: #eee;
  3. border: 1px solid #ccc;
  4. }
下一节