Twitter Bootstrap缩略图类不起作用

Question

我正在关注YelpCampround的教程！我使用的是v1版本，该应用的完整代码在这里：

YelpCamp版本1 1

甚至复制并粘贴原始代码：

<% include partials/header %>
 <div class="container">
     <header class="jumbotron">
         <div class="container">
             <h1>Welcome To YelpCamp!</h1>
             <p>View our hand-picked campgrounds from all over the world</p>
             <p>
                <a class="btn btn-primary btn-large" href="/campgrounds/new">Add New Campground</a>
             </p>
         </div>
     </header>

     <div class="row text-center" style="display:flex; flex-wrap: wrap;">
        <% campgrounds.forEach(function(campground){ %>
            <div class="col-md-3 col-sm-6">
                <div class="thumbnail">
                   <img src="<%= campground.image %>">
                   <div class="caption">
                       <h4><%= campground.name %></h4>
                   </div>
                </div>
            </div>
        <% }); %>
    </div>
</div>

<% include partials/footer %>

“缩略图”类无法正常工作，我看到的图像如下所示：

怎么了？我需要使用旧版本的Bootstrap吗？立即使用4.1.3

Answer 1

尝试img缩略图，请参阅getbootstrap.com/docs/4.1/content/images/#image-thumbnails。