html - 引导卡列媒体查询

Question

我的一个项目遇到了一些麻烦。我有一个页面在卡片列中显示一组卡片。我添加了一个媒体查询以在 xs 屏幕上显示 2 列：

// scss media query
    .card-columns {
       @include media-breakpoint-only(xs) {
        column-count: 2;
      }
    }

// html file with card-columns
  <main>
    <!-- RECIPES SECTION -->
    <section>
        <div class="mb-5">
            <div class="container">
                <div class="card-columns">
                    <!-- Card -->
                    <div class="card">

                        <!-- Card content -->
                        <div class="card-body">   
                            <a href="#">
                                <span class="like float-right ml-2 text-dark">3256 <i class="far fa-heart"></i></span>
                            </a>                    
                            <!-- Title -->
                            <a href="recipe.html">
                                <p class="card-title font-weight-bold mb-0">New spicy meals</p>   
                            </a>
                                                
                        </div>
                    
                        <!-- Card image -->
                        <img class="card-img-top rounded-0" src="food/IMG_20181124_134252.jpg" alt="Card image cap">

                    
                        <!-- Card content -->
                        <div class="card-body">
                            <span class="fa fa-star checked"></span>
                            <span class="fa fa-star checked"></span>
                            <span class="fa fa-star checked"></span>
                            <span class="fa fa-star"></span>
                            <span class="fa fa-star"></span>
                    
                        </div>
                    
                    </div>
                    <!-- Card -->
                    ... 
                    20 more cards
                    ...
                </div>

        </div>
    
    </section>

</main>
<footer id="main-footer" class="text-white bg-dark">
    <div class="container">
        <div class="row">
            <div class="col text-center py-4">
                <h3>B-gan</h3>
                <p>Copyright &copy; <span id="year"></span></p>
            </div>
        </div>
    </div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

但后来发生了这种情况：

标签： htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4