XOOPS輕鬆架 - 線上書籍

:::

BootStarp4實做入門
==============

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

1. 如果是用 FireFox，可以點擊 <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>M</kbd> 開啟自適應模式。
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>
    ```

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D958

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器