lang
1<div class="container-fluid main-content"> 2 <div class="row"> 3 <div class="col-sm-6 col-md-4 col-lg-3"> 4 <div class="card"> 5 <img class="card-img-top img-responsive" src="img/fractal.jpg" alt="Card image cap"> 6 <div class="card-block"> 7 <h4 class="card-title">Fractal</h4> 8 <p class="card-text">This is a program that draws fractal.</p> 9 <a href="#" class="btn btn-primary">Go somewhere</a> 10 </div> 11 </div> 12 </div> 13 <div class="col-sm-6 col-md-4 col-lg-3"> 14 <div class="card"> 15 <img class="card-img-top img-responsive" src="img/isbnmanagementsystem.png" alt="Card image cap"> 16 <div class="card-block"> 17 <h4 class="card-title">ISBN Management System</h4> 18 <p class="card-text">This is a web page that you can save ISBN of the books you read.</p> 19 <a href="#" class="btn btn-primary">Go somewhere</a> 20 </div> 21 </div> 22 </div> 23 <div class="col-sm-6 col-md-4 col-lg-3"> 24 <div class="card"> 25 <img class="card-img-top img-responsive" src="img/10fastfingersmusicgamever..png" alt="Card image cap"> 26 <div class="card-block"> 27 <h4 class="card-title">10 Fast Fingers Music Game Ver.</h4> 28 <p class="card-text">This is a music game imitating a typing game which is called 10 Fast Fingers.</p> 29 <a href="#" class="btn btn-primary">Go somewhere</a> 30 </div> 31 </div> 32 </div> 33 34 <div class="col-sm-6 col-md-4 col-lg-3"> 35 <div class="card"> 36 <img class="card-img-top img-responsive" src="img/fractal.jpg" alt="Card image cap"> 37 <div class="card-block"> 38 <h4 class="card-title">Fractal</h4> 39 <p class="card-text">This is a program that draws fractal.</p> 40 <a href="#" class="btn btn-primary">Go somewhere</a> 41 </div> 42 </div> 43 </div> 44 <div class="col-sm-6 col-md-4 col-lg-3"> 45 <div class="card"> 46 <img class="card-img-top img-responsive" src="img/isbnmanagementsystem.png" alt="Card image cap"> 47 <div class="card-block"> 48 <h4 class="card-title">ISBN Management System</h4> 49 <p class="card-text">This is a web page that you can save ISBN of the books you read.</p> 50 <a href="#" class="btn btn-primary">Go somewhere</a> 51 </div> 52 </div> 53 </div> 54 <div class="col-sm-6 col-md-4 col-lg-3"> 55 <div class="card"> 56 <img class="card-img-top img-responsive" src="img/10fastfingersmusicgamever..png" alt="Card image cap"> 57 <div class="card-block"> 58 <h4 class="card-title">10 Fast Fingers Music Game Ver.</h4> 59 <p class="card-text">This is a music game imitating a typing game which is called 10 Fast Fingers.</p> 60 <a href="#" class="btn btn-primary">Go somewhere</a> 61 </div> 62 </div> 63 </div> 64 </div> 65 </div>
#質問事項
現在このようなBootStrapでHTMLコードを書いているのですが、
このように、縦の一番長いカードに合わせられてしまい、スペースができてしまいます。
rowで指定しているので当たり前という感じではあるのですが、この敷き詰め方法が分かりません…。
画面が大きいときには4個のカード、中くらいのときには3個のカード、小さいときには2個のカード、スマホサイズのときは1個のカードを1行に並べたいと思っています(そのためにcolの指定が色々あります)
このルールを保ったまま、このスペースをどうにか削除する方法をお願いします!
#追記
回答してくださった方、ありがとうございます・・・!
全てのカードの高さを揃えるというわけではなく、空いているスペース分詰めたいと思っています。BootStrapは4を使用してます。img-responsiveはミスです、すみません(汗)
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。