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>