引导框架 - col-sm - 小屏幕的网格不起作用答案

【问题标题】：Bootstrap-framework - col-sm - grid for small screens doesn't work引导框架 - col-sm - 小屏幕的网格不起作用
【发布时间】：2022-01-12 04:23:28
【问题描述】：

我尝试了很多东西，但找不到解决问题的方法。

我想以某种方式为所有类型的屏幕对齐 3 个不同的部分，但引导程序中的 col-sm 和 col-xs 不起作用。

我试过了：

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            a           
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
            b
        </div>
        <div class="col-lg-4 col-md-4 col-sm-2 col-xs-2">
            c
        </div>
    </div>
</div>

但它只在大屏幕和中屏幕显示在同一行，而不是在小屏幕上。

我发现使其工作的唯一方法是编写 col 而不是 col-sm-4 但如果我这样做，我将无法操作网格完全符合我的要求

【问题讨论】：

没有col-xs，你应该从col-的小视图开始，然后只在列更改时包含类。所以，col-lg-4 col-md-4 col-sm-6 col-xs-6 应该是 col-md-4 col-6。如果没有变化，您不必定义每个断点

标签： html css twitter-bootstrap grid col

【解决方案1】：

要解决宽度小于576px的问题，你应该应用col-4样式。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
            a           
        </div>
        <div class="col-4 col-sm-4 col-md-4 col-lg-6 col-xl-6">
            b
        </div>
        <div class="col-4 col-sm-4 col-md-4 col-lg-2 col-xl-2">
            c
        </div>
    </div>
</div>

【讨论】：

没有col-xs，OP希望那些小于576px，所以应该是col-4，col-6，那么最后一列是col-2
@zgood 我注意到了。我没有具体说明这个细节，因为我只关注问题。
谢谢，它工作得很好！你知道为什么我们必须添加这个以及为什么 col-sm 没有按预期工作吗？
我明白，我只是觉得值得一提，因为它确实与问题有关 - 他使用了错误的 col 类
@Reminder 如果你查看表格，col-sm 样式在屏幕宽度在 576px 到 720px 之间有效。