実現したいこと
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/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
0 コメント