程式設計師應有的程式技能-BootStrap自適應RWD-前端技術

BootStarp4實做入門

13. 檢查手機用畫面

一、調整單欄內容的對齊方向

1. 如果是用 FireFox，可以點擊 Ctrl+Shift+M 開啟自適應模式。
2. 當畫面變成小螢幕時，會自動調整成單欄式，此時，若沿用多欄時的對齊方向，畫面看起來就會很詭異。
3. 例如小螢幕時，logo會靠右邊，顯得奇怪，因此，可以改成「大螢幕時靠右，小螢幕時置中」，換成語法便是：

   <div class="col-sm text-center text-sm-right"><img src="images/logo.png" alt="logo"></div>

4. .text-center 定義沒事就置中，.text-sm-right則是定義當螢幕大於 576px 時，就把 logo 靠右之意。
5. 右邊的連結也可以比照辦理：

   <div class="col-sm text-center text-lg-left">一堆連結</div>

二、調整按鈕間距

1. 小螢幕時，可能會導致圖形按鈕變兩行，此時，可以利用間隔工具做自適應調整。

   <a href="#" class="btn btn-tools m-1 mx-sm-2 p-0">

   <i class="fa fa-search fa-2x fa-flip-horizontal" aria-hidden="true"></i>

   <div>站內搜尋</div>

   </a>

2. .p-0 就是不要有內距（padding）
3. .m-1 就是平時都設邊距1個空格單位
4. .mx-sm-2 則是當螢幕大於 576px 時，邊距設為左右2個空格單位。

三、讓文字不換行

1. 由於最右邊是一堆連結，當畫面變小時，空間變小，可能會導致連結文字被壓縮，變成一大串，為了避免這種狀況，可以利用 .text-nowrap 設定為文字不換行

   <div class="col-sm text-center text-lg-left text-nowrap">一堆連結</div>

後續內容省略......

【資料引用資訊】

google關鍵字:BootStarp4實做入門

網址:https://campus-xoops.tn.edu.tw/modules/tad_book3/html_all.php?tbsn=32