章节
问答
课签
笔记
评论
占位
占位

列偏移

有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用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个网格。

效果图如下:

?不会了怎么办

参考代码如下:

 <div class="row">
    <div class="col-md-2">.col-md-2</div>
    <div class="col-md-2 col-md-offset-1">.col-md-2列向右移动1列的间距</div>
    <div class="col-md-2 col-md-offset-1">.col-md-2列向右移动1列的间距</div>
    <div class="col-md-3 col-md-offset-1">.col-md-3列向右移动1列的间距</div>
  </div>
||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
[class *= col-]{
background
      -color:
      #eee;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / qq_文之彬bin_eiwCL9
例子里面Boostrap样式引入多了个http,改为下面这个就行了<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

已采纳回答 / _晴不知所起一往而深_
CTRL 再加滚轮缩小看看~col-md 要求屏幕宽度≥992px,,或者改成col-sm,col-xs试试看

最新回答 / cxdragoon
问题描述得具体点

最新回答 / 慕用9780473
<...图片...>这是官网上的,没有溢出

最新回答 / 南桥畂翊
能用呀<...图片...>

已采纳回答 / hhhs1s1s
bootstrap 全局设置 box-sizing: border-box;* {  -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;          box-sizing: border-box;}

已采纳回答 / 任勉之
一行(row)里有12个坑(col) ,列偏移就是根据当前还剩几个坑来定位,然后偏移几个坑;动手写一下代码就明白了 

最新回答 / 木子水吉
你没有全屏吗?屏幕放大点试试看

最赞回答 / 浅草是彬
Bootstrap框架的网格系统中有四种基本的用法:.col-xs- (auto) , .col-sm- (for 750px) , .col-md- (for 970px)  , .col-lg- (for 1170px) 你把col-md 改成 col-xs, 在你调节窗口大小的时候就不会有问题了..

最新回答 / echo_kinchao
不是 他这个只是针对于布局

最新回答 / Thinker_Ac
确实是笔误,哈哈,自己明白就好,可以给他们反馈一下的。
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言