:::
12. 讓HTML可以被引入
13. 檢查手機用畫面
一、調整單欄內容的對齊方向
- 如果是用 FireFox，可以點擊 Ctrl+Shift+M 開啟自適應模式。
- 當畫面變成小螢幕時，會自動調整成單欄式，此時，若沿用多欄時的對齊方向，畫面看起來就會很詭異。
- 例如小螢幕時，logo會靠右邊，顯得奇怪，因此，可以改成「大螢幕時靠右，小螢幕時置中」，換成語法便是：
<div class="col-sm text-center text-sm-right"><img src="images/logo.png" alt="logo"></div>
-
.text-center定義沒事就置中，.text-sm-right則是定義當螢幕大於 576px 時，就把 logo 靠右之意。 -
右邊的連結也可以比照辦理：
<div class="col-sm text-center text-lg-left">一堆連結</div>
二、調整按鈕間距
- 小螢幕時，可能會導致圖形按鈕變兩行，此時，可以利用間隔工具做自適應調整。
<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> -
.p-0就是不要有內距（padding） -
.m-1就是平時都設邊距1個空格單位 -
.mx-sm-2則是當螢幕大於 576px 時，邊距設為左右2個空格單位。
三、讓文字不換行
- 由於最右邊是一堆連結，當畫面變小時，空間變小，可能會導致連結文字被壓縮，變成一大串，為了避免這種狀況，可以利用
.text-nowrap設定為文字不換行<div class="col-sm text-center text-lg-left text-nowrap">一堆連結</div>
