Bootstrapでメディアクエリが効かない

Bootstrapのcardの列数を画面の幅に応じて３個、２個、１個としたく、
公式ドキュメントのカードの最下部にある下記のような書き方を試してみました。

.card-columns {
  @include media-breakpoint-only(md) {
    column-count: 2;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

が、少しづつ画面を狭くしても3個→１個になってしまいます！

↓↓↓↓↓

ソースコードの全体は以下の通りです。
BootstrapのテンプレートにCard要素を丸コピペしています。

index.html
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
10
11    <title>Hello, world!</title>
12  </head>
13  <body>
14    <h1>Hello, world!</h1>
15    <div class="card-columns">
16      <div class="card">
17        <svg class="bd-placeholder-img card-img-top" width="100%" height="160" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
18        <div class="card-body">
19          <h5 class="card-title">Card title that wraps to a new line</h5>
20          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
21        </div>
22      </div>
23      <div class="card p-3">
24        <blockquote class="blockquote mb-0 card-body">
25          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
26          <footer class="blockquote-footer">
27            <small class="text-muted">
28              Someone famous in <cite title="Source Title">Source Title</cite>
29            </small>
30          </footer>
31        </blockquote>
32      </div>
33      <div class="card">
34        <svg class="bd-placeholder-img card-img-top" width="100%" height="160" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
35        <div class="card-body">
36          <h5 class="card-title">Card title</h5>
37          <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
38          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
39        </div>
40      </div>
41      <div class="card bg-primary text-white text-center p-3">
42        <blockquote class="blockquote mb-0">
43          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
44          <footer class="blockquote-footer text-white">
45            <small>
46              Someone famous in <cite title="Source Title">Source Title</cite>
47            </small>
48          </footer>
49        </blockquote>
50      </div>
51      <div class="card text-center">
52        <div class="card-body">
53          <h5 class="card-title">Card title</h5>
54          <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
55          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
56        </div>
57      </div>
58      <div class="card">
59        <svg class="bd-placeholder-img card-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Card image"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Card image</text></svg>
60      </div>
61      <div class="card p-3 text-right">
62        <blockquote class="blockquote mb-0">
63          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
64          <footer class="blockquote-footer">
65            <small class="text-muted">
66              Someone famous in <cite title="Source Title">Source Title</cite>
67            </small>
68          </footer>
69        </blockquote>
70      </div>
71      <div class="card">
72        <div class="card-body">
73          <h5 class="card-title">Card title</h5>
74          <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
75          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
76        </div>
77      </div>
78    </div>
79    <!-- Optional JavaScript -->
80    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
81    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
82    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
83    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
84  </body>
85  <style>
86.card-columns {
87  @include media-breakpoint-only(md) {
88    column-count: 2;
89  }
90  @include media-breakpoint-only(xl) {
91    column-count: 5;
92  }
93}
94  </style>
95</html>
96

試したこと

メディアクエリにあまり詳しくありませんが、調べているとCASSやSCSSの書き方なのかな？と思い、
以下を試したりしました。

<style lang='scss'>

<style lang='sass'>

よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

SCSSはブラウザでは実行できませんので、CSSにコンパイルするところから始めてください。
Bootstrap 4のCSSコンパイルをGulpで管理する方法 - Qiita

または、SCSSでの記述をやめて、普通にCSSのメディアクエリで書くのもいいかと思います。

なお、Bootstrap5では削除されています。

In v4 we used a CSS-only technique to mimic the behavior of Masonry-like columns, but this technique came with lots of unpleasant side effects. If you want to have this type of layout in v5, you can just make use of Masonry plugin. Masonry is not included in Bootstrap, but we’ve made a demo example to help you get started.

Cards · Bootstrap v5.0

投稿2020/12/14 16:40

編集2020/12/14 16:44