railsでweb アプリを制作しています。
bootstrap 4を利用しているのですが、cardを公式HP通りに記載しても、http://v4-alpha.getbootstrap.com/components/card/にあるような表示にならず、枠と写真が重ならない(枠だけ画面いっぱいに広がってしまったり等)。
railsを利用している場合、しなければならない設定などあるのでしょうか?
上の例はうまくいくコードで、下の例はうまくいかない例です。
<div class="container"> <div class="row"> <div class="col-md-6"> <div class="card"> <img class="card-img-top" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-md-6"> <div class="card"> <%= link_to image_tag("earring/01.jpg"), :class => "card-img-top", :alt => "Card image cap" %> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> <CSS> .card {max-width: 15rem;} .card-img-top {width: 100%; }
![イメージ説明](ce0c48a61c41d2926eedc91732d44b89.png)
コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、その状況のスクリーンショットなどがあるとよりわかりやすいです。
回答2件
あなたの回答
tips
プレビュー