row-sm和row-cols-sm-n(其中n<12)做什么？我看过col sm-n(其中是n<12)的用法，但我不知道row-sm的用法

Question

根据我的理解，当我们给出sm.Then -sm-n时，当设备屏幕px小于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改为仅row时，我得到了列，但它们的响应性很差。当我减小屏幕宽度时，它们变成了和之前一样糟糕的堆栈形式。我对bootstrap和flex概念非常陌生，所以我正在尝试理解它们之间的区别。

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

Answer 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>

​