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

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

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

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

Q&A

2回答

11456閲覧

bootstrap で要素がズレて表示されてしまいます。

Ohiirechan

総合スコア24

Bootstrap

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

0グッド

0クリップ

投稿2017/01/31 15:29

bootstrap で一覧画面を作ってるのですが、画像のとおり高さが違うためずれてしまいます。この不自然な空白をなくすためにきれいに整列させたいのですが、どようにしたらいいのでしょうか?

![イイメージ説明(60f4bad8f33873d7c78ec31714783816.png)

html

1<div class="row"> 2 <div class="col-sm-6 col-md-4 "> 3 <div class="thumbnail"> 4 <img src="/images/assets/event_img_default.png" alt="Event img default" style=""> 5 <div class="caption"> 6 <h3> 7 <a href="/event_infos/6">一緒に海に行きましょう</a> 8 </h3> 9 <hr> 10 <p>季節外れの海もまた一考。凍えながらですが、一緒に泳いで... </p> 11 <p>2017/03/30 22:58 ~ 2017/06/30 22:58 </p> 12 <p> 13 <a class="btn btn-primary" href="/event_infos/6">詳しく見る </a> 14 </p> 15 </div> 16 </div> 17 </div> 18 <div class="col-sm-6 col-md-4 "> 19 <div class="thumbnail"> 20 <img src="/images/assets/event_img_default.png" alt="Event img default" style=""> 21 <div class="caption"> 22 <h3> 23 <a href="/event_infos/4">東京ではなになりましょう!</a> 24 </h3> 25 <hr> 26 <p>私が後で、あなたが先でよろしく </p> 27 <p>2017/04/29 14:58 ~ 2017/10/29 14:58 </p> 28 <p> 29 <a class="btn btn-primary" href="/event_infos/4">詳しく見る</a> 30 </p> 31 </div> 32 </div> 33</div>

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

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

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

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

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

guest

回答2

0

2行目以降のソースがわからなかったのですが、下記の様にrowで囲えば問題なく表示されるのではないでしょうか。

html

1<div class="row"> 2 <div class="col-sm-6 col-md-4 "> 3 <div class="thumbnail"> 4 <img src="/images/assets/event_img_default.png" alt="Event img default" style=""> 5 <div class="caption"> 6 <h3> 7 <a href="/event_infos/6">一緒に海に行きましょう</a> 8 </h3> 9 <hr> 10 <p>季節外れの海もまた一考。凍えながらですが、一緒に泳いで...<br>改行してみました。 </p> 11 <p>2017/03/30 22:58 ~ 2017/06/30 22:58 </p> 12 <p> 13 <a class="btn btn-primary" href="/event_infos/6">詳しく見る </a> 14 </p> 15 </div> 16 </div> 17 </div> 18 <div class="col-sm-6 col-md-4 "> 19 <div class="thumbnail"> 20 <img src="/images/assets/event_img_default.png" alt="Event img default" style=""> 21 <div class="caption"> 22 <h3> 23 <a href="/event_infos/4">東京ではなになりましょう!</a> 24 </h3> 25 <hr> 26 <p>私が後で、あなたが先でよろしく </p> 27 <p>2017/04/29 14:58 ~ 2017/10/29 14:58 </p> 28 <p> 29 <a class="btn btn-primary" href="/event_infos/4">詳しく見る</a> 30 </p> 31 </div> 32 </div> 33 </div> 34</div> 35<div class="row"> 36 <div class="col-md-offset-4 col-sm-6 col-md-4 "> 37 <div class="thumbnail"> 38 <img src="/images/assets/event_img_default.png" alt="Event img default" style=""> 39 <div class="caption"> 40 <h3> 41 <a href="/event_infos/4">A</a> 42 </h3> 43 <hr> 44 <p>a </p> 45 <p>2017/04/29 14:58 ~ 2017/10/29 14:58 </p> 46 <p> 47 <a class="btn btn-primary" href="/event_infos/4">詳しく見る</a> 48 </p> 49 </div> 50 </div> 51 </div> 52</div>

画面イメージ

投稿2017/02/01 00:19

motuo

総合スコア3027

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

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

0

<div class="thumbnail">のひとくくりにmin-heightを指定してみてはいかがでしょうか。 文字数が多いと高さが高くなってしまうので、そこは制限しつつ、ボックスの最低限の高さだけ合わせてみては。

投稿2017/04/11 21:41

punks_for

総合スコア15

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問