Question

我正在创建一个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;
}

Answer 1

修正了它 - 问题是行网格类。我删除了第二个[class * =＆＃34; col - ＆＃34;]，第一张图片就到了。谢谢！

Answer 2

由于CSS / Bootstrap您是否尝试过

'img-thumbnail'     //Shapes the image to a thumbnail   
'img-responsive'    //Makes an image responsive (will scale nicely to the parent element)

你可以使用它

 <img src = "<%=staff.image%>" class="img-responsive">

图像的Bootstrap网格对齐

2 个答案: