Bootstrap 響應式類管理

Question

我對 Bootstrap 比較陌生，對網格系統也很陌生。 我最近開始使頁面響應。 雖然使 main/general 部分具有響應性似乎很簡單（添加幾個類就足夠了），但修改受其他部分影響的小部分似乎很麻煩。

例如，我有一個包含一些按鈕的div 。 （這是在編輯實體信息的頁面中。）根據窗口寬度，部分移動，這些按鈕會受到影響。 所以我需要給這個“按鈕”部分正確的外觀。 這些是我申請的課程：

<div class="col-12 mt-3 align-items-center col-sm mt-sm-0 pl-sm-3 align-items-sm-start col-md-12 mt-md-3 pl-md-0 align-items-md-center d-flex flex-column justify-content-center upload-buttons">
    
    <!-- buttons -->

</div>

這給了我正確的外觀，但這不是很復雜嗎？ 跟蹤斷點中發生的事情是很困難的。 這樣做幾次會讓我頭疼。

我檢查了一些頁面和視頻，但沒有遇到一種（更多？）實用的方法來管理這些類。 即使有一個也不知道，我決定使用 JavaScript 實現一個，並最終得到以下 html：

<div data-bs-responsive='{
        "xs" : {
            "col" : 12,
            "mt" : 3,
            "align-items" : "center"
        },
        "sm" : {
            "col" : "",
            "mt" : 0,
            "pl" : 3,
            "align-items" : "start"
        },
        "md" : {
            "col" : 12,
            "mt" : 3,
            "pl" : 0,
            "align-items" : "center"
        }
    }' class="d-flex flex-column justify-content-center upload-buttons">
    
    <!-- buttons -->

</div>

我在DOMContentLoaded上掃描頁面並將data-bs-responsive轉換為適當的類。 這給了我相同的輸出/html。 至少，現在，我可以輕松跟蹤正在發生的事情。

有沒有更好的方法來處理這個問題？ 或者我只是讓這比它需要的更復雜？ 即使是這樣，我也不認為我會離開這個 JS 解決方案（至少目前是這樣）。 當前/手動方式太痛苦了。

---

與我的評論相關的更新：

我已經將我應用的解決方案從 JS 移到了服務器端 (PHP)。 現在我沒有通過 JS 修改元素（使用屬性data-bs-responsive並將其轉換為DOMContentLoaded上的適當類），現在我將類直接輸出到class屬性中。

雖然這對最初的問題沒有任何幫助，但它解決了延遲的視覺變化。

<div class="<?= Bootstrap::classes([
        "xs" => [
            "col" => 12,
            "mt" => 3,
            "align-items" => "center",
        ],
        "sm" => [
            "col" => "",
            "mt" => 0,
            "pl" => 3,
            "align-items" => "start",
        ],
        "md" => [
            "col" => 12,
            "mt" => 3,
            "pl" => 0,
            "align-items" => "center",
        ],
    ]) ?> d-flex flex-column justify-content-center upload-buttons">

    <!-- buttons -->

</div>

Answer 1

無數的 Bootstrap 類都很棒，在很多情況下都很有用，但是使用十幾個這樣的類來設置元素的樣式並不比使用老式內聯樣式 IMO 更好。 另外，這樣做通常會導致重復代碼並且不會遵循 DRY 原則（不要重復自己）。

我建議在單獨的樣式表中應用盡可能多的樣式，最好是 SCSS 樣式表，它還允許您使用 Bootstrap 的變量和 Bootstrap 的 SCSS 文件中內置的所有其他強大功能。 然后，您可以隨時在樣式表中利用 Bootstrap 的媒體查詢。

現在，該建議專門針對與邊距、填充、彈性對齊等相關的類。例如，使用col類幫助您管理網格絕對應該直接應用於 HTML。 拋棄 JS/服務器端方法。