时间戳

首页 > 解决方案 > 如何调整 bootstrap 3 缩略图以占用空白空间？

css - 如何调整 bootstrap 3 缩略图以占用空白空间？

问题描述

这是我的代码。我正在使用 express.js。这是ejs文件。下面的代码快照是这样的在此处输入图像描述

<%- 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-lg btn-primary" href="/campgrounds/new">Add new Campground </a>
                </p>
            </div>
        </header>
    

        <div class="row" 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>
                        <p>
                            <a href="/campgrounds/<%= campground._id %>" class="btn btn-primary">More Info</a>
                        </p>
                    </div>
                </div>
            <% }); %>
        </div>
    </div>


<%- include ("../partials/footer") %>

我想调整缩略图以占据中间的空白，因为它看起来很可怕。有什么方法可以使用 bootstrap 3 来做到这一点（我也在图片中标记了请参考图片）任何帮助表示赞赏..

标签： csstwitter-bootstraptwitter-bootstrap-3bootstrap-modal

解决方案

行中最大的缩略图的高度是多少？

始终将缩略图类设置为该高度

.thumbnail{
   width:250px;
   height:600px !important;
}

推荐阅读