質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

4446閲覧

Bootstrapの縦敷き詰め

atemu

総合スコア94

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/10/16 11:10

編集2016/10/16 22:20

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はミスです、すみません(汗)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

自己解決

結局、BootStrapだけでは難しそうだったので、JSのresizeイベントを利用して強引に解決しました。

投稿2016/10/17 06:34

atemu

総合スコア94

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

簡単な方法だと、以下のようにheightを指定しまう方法でしょうか。

html

1<style> 2 .card { 3 height: 300px; 4 } 5</style>

画像の高さによっては色々と不都合が出るので、その場合はcard-img-topとcard-blockにそれぞれ高さを指定してみたりすると、単純かと思います。
一番確実なのは画像の大きさを統一してしまうことですね...

ご存じだったら申しわけないですが、Bootstrap4ではimg-responsiveが消えました。
もし使いたい場合はimg-fluidを使うか、img-thumbnailあたりを使うと良いです。

投稿2016/10/16 17:12

toritoritorina

総合スコア972

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

Bootstrap3をご利用ですよね?
だとすると、隣り合うカードの高さを揃えるには、JavaScriptの力を借りるしかないと思います。

matchHeight.js解説
ダウンロード

↑このような高さを揃えるJSを導入してください。

ちなみにBootstrap4ではflexboxを使ったレイアウトが導入されていますので、
そちらをベースに作れば自動的にカードの高さは揃うと思われます。

投稿2016/10/16 16:56

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/10/17 05:26

scss からコンパイルしないとまだ使えないようになってるよ
guest

0

pinterest風のレイアウトだと思うのですが、
pinterest css」や「pinterest layout」でググると色々出てきます。

投稿2016/10/17 01:27

KazukiSawamura

総合スコア32

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問