亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

章節
問答
課簽
筆記
評論
占位
占位

列偏移

有的時候,我們不希望相鄰的兩個列緊靠在一起,但又不想使用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>
||

提問題

寫筆記

公開筆記
提交
||

請驗證,完成請求

由于請求次數過多,請先驗證,完成再次請求

加群二維碼

打開微信掃碼自動綁定

您還未綁定服務號

綁定后可得到

  • · 粉絲專屬優惠福利
  • · 大咖直播交流干貨
  • · 課程更新,問題答復提醒
  • · 賬號支付安全提醒

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

使用 Ctrl+D 可將課程添加到書簽

邀請您關注公眾號
關注后,及時獲悉本課程動態

舉報

0/150
提交
取消
全部 精華 我要發布
全部 我要發布
最熱 最新
只看我的

手記推薦

更多

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?