gpt4 book ai didi

css - 如何调整 Bootstrap 3 缩略图以占据空白空间?

转载 作者:行者123 更新时间:2023-12-04 08:40:08 25 4
gpt4 key购买 nike

这是我的代码。我正在使用 express.js。这是 ejs 文件。下面的代码快照是这个 enter image description here

<%- 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 做到这一点
(我也在图片中标出请引用图片)
任何帮助表示赞赏..

最佳答案

行中最大缩略图的高度是多少?
始终将缩略图类设置为该高度

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

关于css - 如何调整 Bootstrap 3 缩略图以占据空白空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64612873/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com