我正在尝试创建一个基本的图库，作为Web开发课程的一部分，以练习使用自举网格。但是，我有一个问题。我有9张图片我试图显示，当我使用相同的图像9次时，它显示我想要的方式：每行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>
如果有人能提供帮助就会很棒！
由于
答案 0 :(得分：0)
我已经覆盖了一些必需的类。尝试在浏览器的全宽度中打开。
.thumbnail>img {
width: 100%;
height: 200px !important;
}<!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>