Bootstrap 响应式类管理答案

【问题标题】：Bootstrap responsive class managementBootstrap 响应式类管理
【发布时间】：2021-02-23 13:17:17
【问题描述】：

我对 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>

【问题讨论】：

我注意到这种 JS 方法存在问题。由于在创建 DOM 树后将一些基本样式（来自 .row 和 .col）应用于元素，因此仅在几毫秒过去后才会出现正确的外观。延迟足以看到风格的变化。虽然这没什么大不了的，但我可能会将此解决方案移至服务器端。

标签： javascript html css twitter-bootstrap responsive-design

【解决方案1】：

无数的 Bootstrap 类非常棒，在很多情况下都可以提供帮助，但是使用十几个这样的类来设置元素的样式并不比使用老式的内联样式 IMO 更好。另外，做这样的事情往往会导致代码重复，不符合 DRY 原则（Don't Repeat Yourself）。

我建议在单独的样式表中应用尽可能多的样式，最好是 SCSS 样式表，它还允许您使用 Bootstrap 的变量以及 Bootstrap 的 SCSS 文件中内置的所有其他强大功能。然后，您可以随时在样式表中利用 Bootstrap 的媒体查询。

现在，该建议专门针对与边距、填充、弹性对齐等有关的类。例如，使用col 类来帮助您管理网格绝对应该直接应用于 HTML。抛弃 JS/服务器端的方法。

【讨论】：