質問編集履歴

1 コードの追加

atomatom

atomatom score 17

2017/04/22 17:50  投稿

Bootstrapでカラムの高さを揃えたい
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>
```
  • PHP

    31206 questions

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

  • HTML

    17612 questions

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

  • CSS

    12148 questions

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

  • MySQL

    9481 questions

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

  • Bootstrap

    1998 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る