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/服务器端方法。