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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Bootstrap

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

Q&A

解決済

4回答

3279閲覧

Bootstrap3でforeachをつかっときにカラム落ち

twin_bird

総合スコア230

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Bootstrap

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

0グッド

0クリップ

投稿2015/11/30 16:30

編集2015/12/01 09:38

bootstrap3の以下のような条件のときにカラム落ちしてしまいます。

PHP

1<div class="jumbotron" id="portfolio_contents"> 2 <div class="container"> 3 <div class="row"> 4 5 <?php foreach ($array as $key => $value): ?> 6 <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" id="portfolio_column"> 7 内容(画像とキャプション) 8 </div> 9 <?php endforeach; ?> 10 11 </div> 12 </div><!-- container --> 13 </div><!-- jumbotron --> 14 15 16

1列にカラムを2つか3つに設定したいのですが、画面サイズによりカラム落ちが発生してしまいます。

このサイトのような感じにしてたいのです→参考サイト

原因は2列目以降にrow classが指定されず、1列が12オーバーで無理やりカラムを続けているからだと思うのですが、参考サイトのように綺麗にカラムを並べるにはどうしたら良いのでしょうか?

データベースからデータ数を計算してページングのロジックのようなモノを考えてrowを複数生成する・・というやり方しかないのでしょうか・・・?

状況がわかりずらくてすみません。。

知りたいことを簡潔にいうと、

参考サイト
こちらのサイトで、1つのrowの中に12を超えるcolを指定しているのにカラム落ちしないのはなぜなのか?

ということです。

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

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

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

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

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

guest

回答4

0

回答ありがとうございました。
原因がわかりました!
いわゆるカードデザイン(リストデザイン)?を作ろうとしていたのですが、カラムの高さ
まちまちだったためにカラム落ちが発生していたようです。

投稿2015/12/01 18:25

twin_bird

総合スコア230

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

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

0

できれば実際にどんな画面になっているか、画面イメージもあれば答えやすいかと思います。
「col-xs-12 col-sm-12」となっていますが、そもそも画面横幅が992pxより小さいということはないのでしょうか。

原因は2列目以降にrow classが指定されず、1列が12オーバーで無理やりカラムを続けているからだと思うのですが

あとこれはどういう意味でしょうか。
見たところ「col-xs-13」とか指定しているわけではないので、そう変なことにはならないように考えております。


以下例文

<div class="rows"> <div class="col-xs-4 col-md-2" ng-repeat="category in categories"> ~ </div> </div>

投稿2015/12/01 00:11

編集2015/12/01 10:06
rontec

総合スコア169

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

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

twin_bird

2015/12/01 09:30

回答ありがとうございます。 foreachでデータを取り出して、colを生成しているので、例えば、データが3つ以上ある場合、rowの中にcol-md-6が3つ以上生成されます。 その場合、rowの中が12を超えてしまうのでカラム落ちしているのではないかという推察です。 状況がわかりづらいかと思いますが、要するには、 「rowの中にcol-md-4を4つ指定した場合に4つ目のカラム落ちを防ぐにはどうしたらいいのか」 ということです。
rontec

2015/12/01 10:10 編集

col-md-6が3つ以上入ること自体は、特に問題ありませんよ。 勝手に改行してくれます。 コメントに例文を追加いたしましたが、例えばangularで繰り返しcol-xs-4を挟むような形の場合、小さな画面の端末では3列表示になります。 これは繰り返しが10回あろうが20回あろうが問題なく、行数が増えるだけです。
twin_bird

2015/12/01 18:28

返信ありがとうございます。 >col-md-6が3つ以上入ること自体は、特に問題ありませんよ。 勝手に改行してくれます。 そうだったのですね! 曖昧な点でした。 カラムの高さが原因であると断定するきっかけになりました!
guest

0

確かめてないですが、
idはユニークじゃないとまずかった気がします。

投稿2015/11/30 23:39

Cafelike

総合スコア89

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

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

twin_bird

2015/12/01 09:38

回答ありがとうございます。 idではなくclassにすべきでしたw
guest

0

ベストアンサー

PHPのソースだけ示されても具体的なコメントは出来ないのですが・・・
下記ページの解説が非常に分かりやすいので、Bootstrapを使用したグリッドシステムについてもう一度復習してみてはいかがでしょうか。

グリッドシステムとブレイクポイントを理解する
ひょっとしたら、2ページ目に記載されている以下の点が影響しているかもしれませんし、

Bootstrap2とBootstrap3ではネストに対する挙動が大きく違うため,Bootstrap2を触ったことがある人は混同しないように注意が必要です。

ブレークポイントの仕様について思い違いがあるのかもしれません。

パッと見た限りでは、クラス名の指定方法が違っているようにも思えますが。

早く解決出来ると良いですね!

投稿2015/11/30 23:04

pi-chan

総合スコア5936

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

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

twin_bird

2015/12/01 09:39

回答ありがとうございます。 参考リンクを参考にして考えてみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問