bootstrap カードがうまく横並びかつレスポンシブにならない

実現したいこと

productの三つのカードを横並べにしたい。かつ画面幅によって自動で調整させるようにしたいです。
また、レスポンシブではメニューが一つにまとまるようにしたいです。

前提

bootstrapを用いて簡単なwebページを制作しています。

発生している問題・エラーメッセージ

カードがレスポンシブにならず、colをそれぞれ設定するとカードが三枚かぶってしまう。

該当のソースコード

<!doctype html>
<html lang="ja">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Bootstrap研修</title>

</head>

<body>
    <!-- header-->
    <div class="container-fluid m-0 p-0">
        <ul class="nav p-3 bg-dark text-white">
            <li class="nav-item">
                <a class="nav-link active text-light bg-dark" aria-current="page" href="#">CRAID</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-light bg-dark" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-light bg-dark" href="#">Products</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-light bg-dark" href="#">Company</a>
            </li>
        </ul>
        <!-- image-->
        <img src="../images/kv.jpg" class="img-fluid w-100 mt-0" alt="...">
    </div>


    <!--company-->
    <div class="container">
        <h2>Company</h2>
        <div class="row">
            <div class="col-md-4">
                <img src="../images/pc2.jpg" alt="img" class="w-100">
            </div>
            <div class="col-md-8">
                <h2>CRAID Inc.</h2>
                <p>クライドは独創するテクノロジーカンパニーとして本質的な価値創出を追求し、より豊かな社会を実現することを目指しています。市場のニーズを先取りした革新的なソリューションと、特許出願技術を含む独創性の高いテクノロジーで、顧客へ新たな価値を提供します。
                </p>
            </div>
        </div>

        <!--products-->
        <h2 class="mb-20">Products</h2>
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card h-100" style="width: 18rem;">
                    <img src="../images/pc1.jpg" class="card-img-top" alt="大きい画像を表示します。">
                    <div class="card-body">
                        <h5 class="card-title">ADMATRIX DSP</h5>
                        <p class="card-text">ポテンシャルの高いターゲティングを実現する広告配信プラットフォーム「ADMATRIX
                            DSP」を開発・展開しています。国内初となる動的IPアドレスの特許技術（特許出願中）などの技術を強みとして、国内のBtoB向け企業の広告パフォーマンスを最大化します。</p>
                    </div>
                    <div class="card-footer bg-white border-0 text-right">
                        <a href="#" class="btn btn-primary">Read more</a>
                    </div>
                    
                </div>
            </div>

            <div class="col-md-4">
                <div class="card h-100" style="width: 18rem;">
                    <img src="../images/pc1.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Polymorphicads</h5>
                        <p class="card-text">スマートフォン向け動画SSP</p>
                        <p class="card-text">「PolymorphicAds」を開発・展開しています。優れた操作性と豊富な配信メニューにより、メディア運営者様の収益を効果的に最大化します。</p>
                    </div>
                    <div class="card-footer bg-white border-0 text-right">
                        <a href="#" class="btn btn-primary">Read more</a>
                    </div>
                            
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-8 col-xs-12">
                <div class="card h-100" style="width: 18rem;">
                    <img src="../images/pc1.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Media</h5>
                        <p class="card-text">ユーザーにとって価値のある情報を提供できるメディアを展開しています。</p>
                    </div>           
                    <div class="card-footer bg-white border-0 text-right">
                        <a href="#" class="btn btn-primary">Read more</a>
                            
                    </div>
            </div>

        </div>
    </div>

    <!--footer-->
    <footer class="p-3 mt-40 bg-dark text-white d-flex align-items-center justify-content-center">@2021 Bootstrap Training</footer>






    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>

試したこと

colの部分全てにcol-lg-3 col-md-4 col-sm-8 col-xs-12を適用する。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

それぞれのカードに
<div class="card h-100" style="width: 18rem;"> と、 width が直接指定されています。
このため、画面の幅によっては三分割した幅よりも 18remの方が大きいため、要素がはみ出る事象が発生しています。
width: 18rem の指定を削除するか、メディアクエリを利用するなどして画面幅に適したサイズを指定してください。

投稿2023/04/11 21:01