我正在创建一个 Node/Express 员工目录。到目前为止一切正常，除了一张图片出现异常，我无法弄清楚为什么这张图片的表现与其他图片不同。该行中的第一张图像高于其余图像，尽管所有图像的大小都相同，并且都以相同的类别放置在页面上。这是页面的样子:
如您所见，只有第一张图像未对齐。 我附上了代码的相关部分，希望有人能看到我明显遗漏的东西。
感谢您的帮助!
这是我的 header.ejs 文件:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type = "text/css" href = "/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type = "text/css" href = "/css/styles.css">
</head>
<body>
这是 staff.ejs 文件:
<%include header %>
<div class = "container">
<header class = "jumbotron">
<h1>Staff Directory</h1>
</header>
<div class = "row row-grid">
<% staff.forEach(function(staff){ %>
<div class="col-sm-1">
<div class="thumbnail">
<div class = "imagewrap">
<!--<h4><%= staff.name %></h4>-->
<img src = "<%=staff.image%>">
<a href = "#" class="round-button"><%=staff.initials%></a>
</div>
</div>
</div>
<% }); %>
</div>
</div>
<%include footer%>
这是我的 CSS:
/* THE CSS TO OVERLAY BUTTON ON THE BOTTOM LEFT CORNER OF IMAGE */
.imagewrap {
display:inline-block;
position:relative;
}
.button2 {
position:absolute;
bottom:0;
right:0;
}
/* A BUNCH OF CSS TO MAKE A ROUND BUTTON*/
.round-button {
position:absolute;
width:20px;
height:20px;
line-height:20px;
border: 2px solid #f5f5f5;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: #4679BD;
box-shadow: 0 0 3px gray;
font-size:10px;
font-weight:bold;
bottom:0;
right:0;
}
.round-button:hover {
background:#30588e;
}
img {
width:100%;
}
.row .display-flex {
display: flex;
flex-wrap: wrap;
}
.row .display-flex > [class*='col-'] {
display:flex;
flex-direction:column;
}
.row.row-grid [class*="col-"] + [class*="col-"] {
margin-top: 15px;
}
最佳答案
已修复 - 问题出在 row-grid 类。我删除了第二个 [class*="col-"]，第一张图片就位了。谢谢!!
关于css - 图像的 Bootstrap 网格对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49730988/