row-sm 和 row-cols-sm-n(其中 n<12) 有什么作用？我见过 col-sm-n 的用法（其中 n<12），但我不知道 row-sm 的用法答案

【问题标题】：What does row-sm and row-cols-sm-n(where n<12) do? I've seen the usage of col-sm-n (where n<12)but i dont know the usage of row-smrow-sm 和 row-cols-sm-n(其中 n<12) 有什么作用？我见过 col-sm-n 的用法（其中 n<12），但我不知道 row-sm 的用法
【发布时间】：2021-11-16 04:15:35
【问题描述】：

根据我在给col-sm-n时的理解，当设备屏幕px小于sm指定的值时，行中的列将按堆栈顺序排列。那么row-sm是什么，它的工作方式和 col-sm 类似吗？什么是 row-cols-sm-n。

当我使用时：

.boxx{
    display:flex
}

     <div class="row-sm mt-2 pt-5 m-5 boxx">
                                <div class="col-sm-3 small-box py-5 ml-3 mt-2  ">a</div>
                                <div class="col-sm-3 small-box py-5 ml-5 mt-2 ">b</div>
                                <div class="col-sm-3 small-box py-5 ml-5 mt-2 ">c</div>
                            </div>

我得到了响应列的输出，但是去掉了 boxx 类，我的输出就变成了堆栈，太随机了。当我将 row-sm 更改为仅行时，我得到了列，但它们的响应能力很差。当我减小屏幕宽度时，它们变成了与之前相同的错误堆栈形式。我对 bootstrap 和 flex 概念很陌生，所以我试图理解它们的区别。

P.s：代码是容器类的一部分。

【问题讨论】：

getbootstrap.com/docs/4.4/layout/grid/#row-columns
.row-sm 不是 Bootstrap 4.X 或 Bootstrap 5 中的标准类。
@coll 好的。但是我得到的输出呢？我想要一个在所有限制下都能响应的输出，我通过 row-sm 得到了它。能否请教一下正确的方法？

标签： html css bootstrap-4 flexbox

【解决方案1】：

.row-sm 不是 Bootstrap 4.X 或 Bootstrap 5 中的标准类。我相信您正在寻找列上的.col-sm 以使屏幕宽度相等，大于 sm 断点，堆栈小于 sm 断点— 参考 https://getbootstrap.com/docs/4.6/layout/grid/#stacked-to-horizontal 获取文档。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container">
    <div class="row mt-2 pt-5">
        <div class="col-sm bg-info">
            a
        </div>
        <div class="col-sm bg-danger">
            b
        </div>
        <div class="col-sm bg-primary">
            c
        </div>
    </div>
</div>

【讨论】：