0
ブートストラップグリッドの使用を練習するためのWeb開発コースの一環として、基本的な画像ギャラリーを作成しようとしています。しかし、私は問題があります。私は9枚の画像を表示しようとしています。同じ画像を9回使用すると、正確にどのように表示されますか：1行につき3画像（lgモード）。しかし、これらの画像をそれぞれ異なるように変更すると、それらの画像の一部が次の行にノックされます。私は、これはイメージがすべて同じサイズではないという事実を行うことです推測していますので、次のように私は私のcssシートにスタイルを追加するために結ば：ブートストラップグリッドの要素がインラインでない
.thumbnail {
height: 100px;
}
しかし、その後、彼らは別の行に表示されますが、それらはお互いに重なっている。ここで
は私のコードです：
<!DOCTYPE html>
<html>
<head>
<title>Image Gallery</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="image.css">
</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="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> IMGS</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign up</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1><span class="glyphicon glyphicon-camera" aria-hidden="true"></span> Image Gallery</h1>
<p>A bunch of beautiful images I didn't take!</p>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1431631927486-6603c868ce5e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=0fea28ab03f5eb3910a742c5574c3a2e">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439209306665-700c9bca794c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=99599dfef000773b04c0c9e476d0d57b">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1467189386127-c4e5e31ee213?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=f046d8bb80a4a493975a65c4b13137b4">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1467404899198-ccadbcd96b91?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=66eef8db7a0aa4119c6c8d7ba211f79f">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1473654729523-203e25dfda10?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=c43d1c1c1733a34791a8e583abd2bc06">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1460891053196-b9d4d9483d9b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=a9aab8c8b84652680a27e93d0d8cbae6">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1421629819184-d73cb1293106?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=c50d1100bf3d617b8645930c1a5f02ff">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1465311530779-5241f5a29892?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=a5e435af2037f50eb837e49fcddf1aa9">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1474496517593-015d8b59450d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=49563d997d36faad03833ddab8d15c0a">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
誰もが素晴らしいだろう手助けができれば！
ありがとうございました
グレートおかげでDaveB1 @完璧 – DaveB1
働く多くは、あなたは答えとして受け入れることができますか？ – WitVault