Bootstrap3 RWD 改變手機顯示順序

Bootstrap3 RWD 改變手機顯示順序

紅寶鐵軌客

寫程式中、折磨中、享受中 ......

1.31k 0

2017/11/22

2分鐘

☕

Bootstrap3 應該算是最流行的 CSS 架構了，用起來簡單，用的人也最多，用來做 RWD 響應式網頁開發也很快，對 RWD 設計，它有一個很方便的架構，但是，如果真的深入的用，就會碰到一些問題，我們就來看看一個常用的手機顯示順序與寬網頁不同時，要怎麼做的。

問題：寬網頁左右留白兩格，手機顯示順序不是右到左。

寬網頁要顯示成以下：

 [ ][ (2) key product 1st     ][ (1) shopping cart ][ ]
    [ (5) suggesting products ][ (3) user account  ]
    [                         ][ (4) promotion     ]

但是手機的顯示順序要像：

[ (1) shopping cart       ]
[ (2) key product 1st     ]
[ (3) user account        ]
[ (4) promotion           ]
[ (5) suggesting products ]

這是一個業主很正常的要求，其實做起來也很簡單，最主要就是要會用 pull-right，以下就直接上碼，我們來看看怎麼做：

<div class="row">
  <div class="col-lg-2"></div>
  <div class="hidden-xs col-lg-2 pull-right"></div>
  <div class="col-lg-3 col-xs-12 pull-right">(1) shopping cart</div>
  <div class="col-lg-5 col-xs-12">(2) key product 1st</div>
  <div class="hidden-xs col-lg-2 pull-right"></div>
  <div class="col-lg-3 col-xs-12 pull-right">(3) user account + (4) promotion</div>
  <div id="desc" class="col-lg-5 col-xs-12 col-lg-offset-2">(5) suggesting products</div>
  <div class="col-lg-2"></div>
</div>

我們來看看每一行：

01: 就宣告這是一段要排版的，ROW 要怎麼介紹啊？
02: 這是寬網頁的左邊留白。
03: 這行很有趣，這是要先填上寬網頁右邊的留白，先用 pull-right，把 lg 兩格右填，這要先填，後面的 pull-right 才不會一拉就到最右邊。
04: 再用 pull-right 把 (1) 填到右邊，但是手機是第一個。
05: 接下來放寬網頁左邊的區塊，手機就會是第二個。
06~10: 就很一樣，唯一特別的是第 08 行的 col-lg-offset-2，沒這行，左邊的留白就不見了。

就這樣，你的 RWD 可以照業主要的手機與寬網頁顯示順序了。

Bootstrap 很好用，唯一的缺點是，要是不蓋掉很多它原來的設計樣式，看起來好一般啊。

喜歡作者的文章嗎？馬上按「關注」，當作者發佈新文章時，思書™就會 email 通知您。

思書是公開的寫作平台，創新的多筆名寫作方式，能用不同的筆名探索不同的寫作內容，無限寫作創意，如果您喜歡寫作分享，一定要來試試！ 《加入思書》

思書™是自由寫作平台，本文為作者之個人意見。

Capistrano: 設定 shared link ...

Rails 怎麼檢查 Params 存不存在?

文章資訊

分類於:

科技

⟩

程式開發