Bootstrap медиа-запрос к карточным столбцам - PullRequest
Новая
       48

Bootstrap медиа-запрос к карточным столбцам

0 голосов
/ 25 апреля 2020

Прежде всего позвольте мне сказать, что я надеюсь, что вы здоровы и здоровы. У меня есть некоторые проблемы с моим проектом. У меня есть страница, которая отображает набор карточек в столбцах карточек. Я добавил медиазапрос, чтобы отобразить 2 столбца на экранах xs: 

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

Но тогда это происходит: столбцы карт на изображении xs

Проверка карты

...