在 Bootstrap 4 中，使用 bg-info 類和 card 類為卡片新增資訊 - 現在在其中包含 card-body 類 -       請帶上你的筆記型電腦參加訓練營  讓我們來看一個例子，學習如何在 Bootstrap 4 中使用 bg-info 類和 card 類 - 例子線上演示       Bootstrap 例子                             資訊 - 活動           請帶上你的筆記型電腦參加訓練營      

要在不同螢幕尺寸上對齊 flex 專案，請使用 justify-content-*-around 類。 你可以實現以下結果，該結果在小型和中型螢幕尺寸上對齊內容 - 要在 Bootstrap 中實現 justify-content-*-around 類 - 例子線上演示       Bootstrap 例子                             預設           答案 1       答案 2       答案 3         小型螢幕           答案 1       答案 2       答案 3         中型螢幕           答案 1       答案 2       答案 3         大型螢幕           答案 1       答案 2       答案 3      

在 Bootstrap 中使用 justify-content-*-around 類在不同螢幕尺寸上對齊 flex 專案 - justify-content-sm-around : 在小型螢幕上對齊內容 justify-content-md-around : 在中型螢幕上對齊內容 justify-content-lg-around : 在大型螢幕上對齊內容 例如，讓我們看看如何為中等螢幕裝置對齊 flex 專案 (justify-content-md-around) -   排名 1   排名 2   排名 3 你可以嘗試執行以下程式碼來實現 justify-content-* - 例子線上演示       Bootstrap 例子                                   排名 1       排名 2       排名 3               排名 1       排名 2       排名 3               排名 1       排名 2       排名 3               排名 1       排名 2       排名 3      

使用 Bootstrap 4 中的 flex-column-reverse 類反轉 flex 專案的順序。 設定 flex-column-reverse 類如下所示 - 新增要包含在 Bootstrap 4 中的 flex 專案 -   演示 1   演示 2   演示 3 以下是如何實現 flex-column-reverse 類的示例 - 例子線上演示       Bootstrap 例子                             實現列反轉           演示 1       演示 2       演示 3      

使用 Bootstrap 4 中的 card-columns 類建立卡片網格 -   在 card-columns 類中設定 card 類 -             一       讓我們來看一個說明 card-columns 類用法的例子 - 例子線上演示       Bootstrap 例子                             演示                             一                                       二                                       三                    

在 Bootstrap 中使用 card-body 類設定卡片內容的容器 -   卡片 1 的正文 現在將其新增到 Bootstrap 卡片類中 -       卡片 1 的正文   你可以嘗試執行以下程式碼來設定 Bootstrap 4 卡片內容的容器 - 例子線上演示       Bootstrap 例子                             標題三           卡片 1 的正文               卡片 2 的正文      

在 Bootstrap 中使用 .justify-content-* 類從開始、結束、居中、之間等位置對齊 flex 專案。對於 justify-content-start，對齊的 flex 專案將如下所示 - 對於 justify-content-end，對齊的 flex 專案將如下所示 - 對於 justify-content-around，對齊的 flex 專案將如下所示 - 讓我們看看如何對齊內容 - 例子線上演示   Bootstrap 例子                       排名 1       排名 2       排名 3               排名 1       排名 2       排名 3               排名 1       排名 2       排名 3      

要在 Bootstrap 中為卡片設定積極操作，請將 bg-success 類與 card 類一起使用。設定積極操作並使用“card bg-success” - 現在使用 card-body 類新增卡片正文 -   印度以 7 विकेट 獲勝 你可以嘗試執行以下程式碼來實現 card-success 類 - 例子線上演示         Bootstrap 例子                             結果     印度和澳大利亞之間前兩場比賽的結果：           印度以 10 分獲勝               印度以 7 विकेट 獲勝      

要在 Bootstrap 4 中樣式化卡片標題內的導航藥丸，請使用 card-header-pills 類，如下所示 & minus;在 Bootstrap 中的 header 類內設定導航藥丸 -             服裝                 電子產品               手機配件       你可以嘗試執行以下程式碼，在 Bootstrap 4 中實現 card-header-pills 類 - 例子線上演示       Bootstrap 例子                             產品                                             服裝                                       電子產品                                       手機配件                                         服裝         我們有男士和女士服裝系列...              

使用 flex-*-wrap 類（如 flex-lg-wrap、flex-sm-wrap、flex-md-wrap 等）在不同螢幕尺寸上換行 flex 專案 - 以下是使用 flex-sm-wrap 類在小型螢幕上換行 flex 專案的程式碼片段 -   波蘭   荷蘭   愛爾蘭   巴西 你可以嘗試執行以下程式碼來在 Bootstrap 4 中實現 flex-*-wrap 類 - 例子線上演示       Bootstrap 例子                             Flex 示例     換行 - 是   ... 閱讀更多