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

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

ただいまの
回答率

90.51%

  • PHP

    24037questions

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

  • HTML

    11488questions

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

  • CSS

    7545questions

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

  • MySQL

    7000questions

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

  • Bootstrap

    1292questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 918

atomatom

score 11

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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • atomatom

    2017/04/22 17:55

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

    キャンセル

  • atomatom

    2017/04/22 18:02

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

    キャンセル

  • kei344

    2017/04/22 18:18

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

    キャンセル

回答 1

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • PHP

    24037questions

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

  • HTML

    11488questions

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

  • CSS

    7545questions

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

  • MySQL

    7000questions

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

  • Bootstrap

    1292questions

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