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

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

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

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

Q&A

解決済

3回答

2812閲覧

bootstrap が横にならんでくれません

Ohiirechan

総合スコア24

Bootstrap

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

0グッド

0クリップ

投稿2017/01/31 03:04

イメージ説明

画像にあるように、Bootstrapで作成したボックスがすべて左端によってしまいますもちろん col-md-6 と入力しています。どのようにすればいいのでしょうか?

<div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="/images/assets/event_img_default.png" alt="Event img default" style=""> <div class="caption"> <h3>一緒に海に行きましょう</h3> <hr> <p>季節外れの海もまた一考。凍えながらですが、一緒に泳いで... </p> <p>2017/03/30 22:58 ~ 2017/06/30 22:58 </p> </div> </div> </div>

というようにやってるのですが、どこがおかしいのかお教えください。

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

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

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

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

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

guest

回答3

0

ベストアンサー

divの閉じタグが足りない気がしたのですがコピペミスでしょうか。

html

1 <div class="thumbnail"> 2 <img src="/images/assets/event_img_default.png" alt="Event img default" style=""> 3 <div class="caption"> 4 <h3>一緒に海に行きましょう</h3> 5 <hr> 6 <p>季節外れの海もまた一考。凍えながらですが、一緒に泳いで... </p> 7 <p>2017/03/30 22:58 ~ 2017/06/30 22:58 </p> 8 </div><!--caption--> 9 </div><!--thumbnail--><!--これがなかった--> 10 </div><!--class="col-sm-6 col-md-4"-->

あと横に並べたい要素(画像で言えば「東京では~」と書いてある要素)のコードも合わせて載せると分かりやすいと思います。

投稿2017/01/31 03:15

koronatail

総合スコア433

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

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

Ohiirechan

2017/01/31 05:34

回答ありがとうございます。 div は僕の入力みすでした。。 > あと横に並べたい要素(画像で言えば「東京では~」と書いてある要素)のコードも合わせて載せると分かりやすいと思います。 これです!これが現況でした。。 「東京では~」のコードもすべて <div class="col-sm-6 col-md-4"> で囲んでいたため起きたバグでした。今度からは省略せずにきちんとコードを載せるようにします。 ありがとうございました。
guest

0

とりあえず、閉じタグが 1 つ足りなくないですか?(単なるコピペミスでなければ)

<div class="row"> ★1 <div class="col-sm-6 col-md-4"> ▲2 <div class="thumbnail"> ◆3 <img src="/images/assets/event_img_default.png" alt="Event img default" style=""> <div class="caption"> ■4 <h3>一緒に海に行きましょう</h3> <hr> <p>季節外れの海もまた一考。凍えながらですが、一緒に泳いで... </p> <p>2017/03/30 22:58 ~ 2017/06/30 22:58 </p> </div> ■4 </div> ◆3 </div> ★1

▲2の閉じタグがない?

インデント スペース 1 つだと分かり辛いので、スペース 2 個とか スペース 4 個とかにした方が良い気がします。

投稿2017/01/31 03:16

編集2017/01/31 03:59
sk_3122

総合スコア1126

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

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

0

offsetを使って空白を調整してみてはどうでしょうか?
(一例)

html

1<div class="col-md-6 col-md-offset-3">

投稿2017/01/31 03:10

編集2017/01/31 03:11
motuo

総合スコア3027

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

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

Ohiirechan

2017/01/31 05:36

回答ありがとうございます。 offset をつかってもだめでした。 で、その後コードをみなおしていると、横に並べたいほかの要素も <div class="col-sm-6 col-md-4"> で囲んでいることがわかり、このせいで左寄せになっていました。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問