Q&A
画像はどこにあるのでしょうか？
開発環境: visual Studio Code
OS: Windows 10
使用ブラウザ: Chrome
ブラウザで下記のコードを実行し、表示すると、画像のようにレイアウトが崩れてしまいます。
レイアウト崩れが原因がわかる方おられましたら、教えてください。
よろしくお願いいたします。
HTML Bootstrap###
1 2 3<!DOCTYPE html> 4<html lang="ja"> 5<head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 9 <link rel="stylesheet" href="css/bootstrap.min.css"> 10 <title>Document</title> 11</head> 12<body> 13 14 <!------------------------------------- Header -------------------------------------------------> 15 <header> 16 <div class="container text-center"> 17 <h1><a href="index.html"><img src="img/logo.jpg" alt="Mr.M COFFEE"></a></h1> 18 </div> 19 </header> 20 <!---------------------------------------end Header ---------------------------------------------> 21 22 23<div class="py-4 bg-light"> 24 <section id="about"> 25 <div class="container"> 26 <div class="row"> 27 <!-- upper content--> 28 <div class="col-md-8 mb-3"> 29 <h3 class="mb-3">Mr.M COFFE について</h3> 30 <p>aaaaaaaaaaa</p> 31 <p>bbbbbbbbbbb</p> 32 <a href="#" class="btn btn-info">メニューを見る</a> 33 <a href="#" class="btn btn-info">店舗情報を見る</a> 34 </div> 35 <div class="col-md-4"> 36 <img src="img/image1.jpg" alt="" class="img-fluid"> 37 </div> 38 </div> 39 <!-- /uppercontents --> 40 <!-- lower contents --> 41 <div class="row"> 42 <!-- card1 --> 43 <div class="col-md-4"> 44 <div class="card mb-3"> 45 <img src="img/image1.jpg" class="img-fluid"> 46 <div class="card-body d-flex justify-content-between"> 47 <h4 class="card-title">くつろぎの空間</h4> 48 <button type="button" class="btn-secondary">詳しく見る</button> 49 </div> 50 </div> 51 </div> 52 <!-- /card1 --> 53 <!-- card2 --> 54 <div class="col-md-4"> 55 <div class="card mb-3"> 56 <img src="img/image1.jpg" class="img-fluid"> 57 <div class="card-body d-flex justify-content-between"> 58 <h4 class="card-title">くつろぎの空間</h4> 59 <button type="button" class="btn-secondary">詳しく見る</button> 60 </div> 61 </div> 62 </div> 63 <!-- /card2 --> 64 65 <!-- card3 --> 66 <div class="col-md-4"> 67 <div class="card mb-3"> 68 <img src="img/image1.jpg" class="img-fluid"> 69 <div class="card-body d-flex justify-content-between"> 70 <h4 class="card-title">くつろぎの空間</h4> 71 <button type="button" class="btn-secondary">詳しく見る</button> 72 </div> 73 </div> 74 </div> 75 <!-- /card3 --> 76 </div> 77 <!-- /row --> 78 <div class="row"> 79 <div class="col-md-12 text-right"> 80 <button type="button" class="btn-info">お部屋一覧を見てみる<span class=""></span></button> 81 </div> 82 </div> 83 </div> 84 </section> 85 </div> 86 87 <script src="js/jquery-3.4.1.min.js"></script> 88 <script src="js/bootstrap.bundle.min.js"></script> 89 </body> 90 91
回答1件
0
ベストアンサー
とりあえず全角スペースを取り除いてください。
可視化されるエディタやフォントを使うことをお勧めします。
投稿2019/10/24 00:50
総合スコア3235
ご回答ありがとうございます。
Visual Studio Codeの拡張期のEvilInspecterをインストールし、全角スペースを表示して、半角スペースにしたところ、すべて高さがそろいました！！
ありがとうございます！
あなたの回答
tips
プレビュー
