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

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

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

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

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

Bootstrap

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

3109閲覧

Bootstrapでカラムの高さを揃えたい

atomatom

総合スコア17

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

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

Bootstrap

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2017/04/22 08:32

編集2017/04/22 08:50

Bootstrapでカラムの高さを揃えたいです。横の幅はそろったのですが、画像の高さがそれぞれ違うため、均等に配置されません。ソースコードではMysqlから画像を取り出してBootstrapで表示しています。他のページではrow-eq-heightを使って高さを揃えられたのですが、ソースコードの場合画像が縦に並んで表示されてしまいました。どなたか解決策をご提示願います。

追記

ヘッダー部分でBootstrapを読み込んでいます。(ロリポップの簡単インストール)。表示される画像はGetty imagesからの埋め込み画像なのですが、これが原因なのですかね?

具体的な流れを書くと、Mysqlに保存された画像埋込コードをPHPで表示して、Bootstrapで均等に並べたいです。しかし、今のところrow-eq-heightを追加すると画像が縦に並んでしまいます...。

<!DOCTYPE html> <html lang="ja"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <title>Footy</title> <!-- Bootstrap core CSS --> <link href="/aaaaa/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <link href="/aaaaa/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="/aaaaa/starter-template.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="/aaaaa/assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="/aaaaa/assets/js/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <meta name="google-site-verification" content="VRh_rSnTZmL4P0AAT_OBYXQyvxRJXQU459Z1e02GS10" /> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Footy</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="http://????.littlestar.jp/aaaaa/index.php">Home</a></li> <li><a href="#">Not yet</a></li> <li><a href="#">Not yet</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav>
<?php ini_set('display_errors',1); $dsn='mysql:dbname=??????-suarez;host=?????.phy.lolipop.lan'; $user='LAA084????'; $password='katotak????'; $dbh=new PDO($dsn,$user,$password); $dbh->query('SET NAMES utf-8'); $club=$_POST['aaa']; $sql="SELECT*FROM userData WHERE club = '{$club}'" ; $stmt=$dbh->prepare($sql); $stmt->execute(); while(1) { $rec=$stmt->fetch(PDO::FETCH_ASSOC); if($rec==false) {break;} $id=$rec['id']; $name=$rec['name']; $image=$rec['image']; $club=$rec['club']; $national=$rec['national']; $height=$rec['height']; $date=$rec['date']; $add=$rec['add']; $video=$rec['video']; $position=$rec['position']; ?> <div class="container"> <div class="row row-eq-height"> <div style=" margin-top:10px;" class=" col-md-3 col-md-offset-0 col-xs-10 col-xs-offset-1"> <p> <?php echo $image;?> </p> <form method="get" action="show.php" > <input name="aaa"value=" <?php echo $id;?>" type="hidden"> <p style="text-align:center;color:deepskyblue;"><input type="submit"value=" <?php echo $name;?>"></p> </form> <p style="border-bottom:1px solid gray;margin-top:5px;"></p> </div> </div> </div> <?php $dbh=null; } ?> </div>

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

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

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

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

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

s8_chu

2017/04/22 08:40 編集

どこでbootstrapを読み込んでいるのですか?可能であれば、省略していないコードを追記していただけませんか?
miyahan

2017/04/22 08:38

この質問にPHP,MySQLは関係ないので、実際にWebブラウザでアクセスして表示されたページのHTMLソースを張っていただいたほうが回答しやすいです。
atomatom

2017/04/22 08:55

Bootstrapはヘッダーで最初に読み込んでいます。PHPを使っていない他のページでは問題なく均等に配置されたので、おそらくrow-eq-heightの位置が問題なのかと思いますが、なかなか解決できず困っております。
atomatom

2017/04/22 09:02

すいません!先ほど自己解決しました。コメント下さった方々ありがとうございました。
kei344

2017/04/22 09:18

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。
guest

回答1

0

自己解決

やはりbootstrapのrowで囲む位置が間違っていたようです。

投稿2017/04/29 10:30

atomatom

総合スコア17

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問