缺少每两行一次的左分区引导网格
我正在做一个魔术:用mongoDB在express中收集卡片数据库。现在我正在试着让它看起来更好，但我对网格有一个问题。现在，我将网格设置为每行两张、三张牌(col-lg-4)，但是每隔几行，左边就没有div。这不是一个可能不好的图像src的问题，它只是决定跳过div。图片在底部。
我的card.ejs (包括我的header.ejs和footer.ejs代码，感叹号表示3个不同文件的分隔)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>magicDB</title>
<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="/stylesheets/main.css" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">magicDB</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li><a href="/cards/new">Add a New Card</a></li>
<li><a href="/cards/search">Search for a Card</a></li>
<li><a href="/cards/search/advanced">Advanced Search</a></li>
</ul>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="/">Login</a></li>
<li><a href="/">Sign Up</a></li>
<li><a href="/">Logout</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
<% cards.forEach(function(card) {%>
<div class="col-lg-4 text-center thumbnail">
<p><strong><%= card.cardName %></strong></p>
<p><%= card.cardSet %></p>
<img src="<%= card.image %>" />
</div>
<% });%>
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</div>
</div>
<footer>
<div class="row">
<div class="col-lg-4">
<h1 class="text-center">Test</h1>
<h1 class="text-center">Test</h1>
</div>
<div class="col-lg-4">
<h1 class="text-center">Test</h1>
<h1 class="text-center">Test</h1>
</div>
<div class="col-lg-4">
<h1 class="text-center">Test</h1>
<h1 class="text-center">Test</h1>
</div>
</div>
</footer>
</body>
</html>我的node.js代码：
app.get("/cards", function(req, res) {
Card.find({}, function(err, Cards) {
if(err) {
console.log(err);
} else {
res.render("card", {cards: Cards});
}
});
});同样，没有任何div。这不是错误的img src属性的问题。它就会忽略它。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-02-16 23:00:55
因为我的评论解决了这个问题，所以我会把它写出来作为答案。
在Bootstrap中，当包装卡片和媒体对象以及它们的一些其他功能时，可能会遇到内容高度不均匀的问题，从而导致明显跳过的项目。要纠正这个问题，可以标准化项目的高度，或者引入CSS规则来确保卡片始终比最高的内容高。
例如，如果图像的高度一般为400px，但有些图像偏离了一到两行，您可能会考虑填充和文本高度(如果到两行，则可能会有所不同)，并添加以下CSS规则：
.thumbnail {
height: 500px
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48835681
复制相关文章
相似问题
在Raphael中，每左坐标只检测一次向网格的快照。
在网格中分离引导分区
引导网格系统中<img>的左对齐
熊猫Python:每两行合并一次
如何每两行重复一次公式
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
