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>