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>
回答1件
あなたの回答
tips
プレビュー