twitter-bootstrap - 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

标签： twitter-bootstrap

Answer 1

尝试 img-thumbnail 请参阅 getbootstrap.com/docs/4.1/content/images/#image-thumbnails。