• 原本的樣子：modal 內容溢出&破版
• 客製後：符合設計稿 modal 樣式，也符合斷點設計

優點

1）只需要調整 _variables 的變數，不需要新增scss檔案（在設計稿只有一種 modal 的情況下） 2）不用寫死圖片寬高

流程&步驟

步驟一：觀察設計 modal 的寬度（lg：920px → md：690px → md 以下：345px）

步驟二 ：修改改 BS5 _variables 裡面的 $modal-sm: 345px; $modal-md: 690px; $modal-lg: 920px;，如下：

//_variables.scss

$modal-sm:                          345px !default; //300px !default;
$modal-md:                          690px !default; //500px !default;
$modal-lg:                          920px !default; //800px !default;
$modal-xl:                          1140px !default;

---- 備註 ----
BS5 預設的 modal 寬度不超過 500px，才會導致一開始的內容溢出。
設定完變數後，modal-dialog 就會依據斷點來調整大小嘍～

---- 備註1 ----
**加入 m-auto (margin: 0 auto) 讓 modal 在每個斷點都呈現水平居中位置。位置如下：
<div class="modal-dialog **m-auto**">...</div>

---- 備註2 ----
**也可加入 modal-dialog-centered 讓 modal 垂直居中。位置如下：
<div class="modal-dialog m-auto **modal-dialog-centered**">...</div>

步驟三：修改變數後，在

<div class="modal-dialog modal-sm modal-md-md modal-lg-lg">...</div>

步驟四：在 .modal-body 中使用格線系統 .modal-body>.container>.row>.col-*

<div class="modal-body">
   <div class="container">
       <div class="row">
           //圖片區塊
           <div class="col-12 col-md-7 col-lg-6">...</div>
           //文字區塊
           <div class="col-12 col-md-5 col-lg-6">...</div>
       </div>
    </div>
</div>

步驟五：使用 ratio 來包住圖片，讓圖片自適應格線系統的寬高。

<div class="modal-body">
   <div class="container">
       <div class="row">
           //圖片區塊
           <div class="col-12 col-md-7 col-lg-6">
							 //從官網選擇需要的[ratio](<https://bootstrap5.hexschool.com/docs/5.0/helpers/ratio/#custom-ratios>)比例，用來包住圖片
               <div class="ratio ratio-1x1">
                   <img src=".." alt="..">
               </div>
           </div>
           //文字區塊
           <div class="col-12 col-md-5 col-lg-6">...</div>
       </div>
    </div>
</div>

步驟六：最後加入一些通用類別來調整樣式就完成了！完全不用另外在scss檔案寫死圖片寬高，爽

<div class="modal-body p-0">
   <div class="container p-0">
       <div class="row align-items-center">
           <div class="col-12 col-md-7 col-lg-6">
               <div class="ratio ratio-1x1 me-5 me-lg-10">
                   <img class="rounded-16" src="./assets/images/teaching.jpeg" alt="teaching">
           </div>
           <div class="col-12 col-md-5 col-lg-6">...</div>
       </div>
    </div>
</div>

最終 code（若有錯誤歡迎提出🤣）