Bootstrap-framework - col-sm - 小屏幕的网格不起作用

Question

我一直在尝试很多事情，但找不到解决问题的方法。

我想以某种方式为所有类型的屏幕对齐 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但如果我这样做，我不能完全按照我的意愿操作网格

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