Css 图像的引导网格对齐_Css_Twitter Bootstrap 3

Css 图像的引导网格对齐

css twitter-bootstrap-3

Css 图像的引导网格对齐,css,twitter-bootstrap-3,Css,Twitter Bootstrap 3,我正在创建Node/Express员工目录。到目前为止，一切都很好，除了一个图像出现了偏差，我不明白为什么这一个图像的行为与其他图像不一样。行中的第一个图像高于其他图像，即使所有图像大小相同，并且都放置在具有相同类的页面上。这是页面的外观：正如您所看到的，只有第一个图像在对齐时脱落。我附上了代码的相关部分，希望有人能看到我明显缺少的东西谢谢你的帮助这是我的header.ejs文件： <!DOCTYPE HTML> <html> <head>

我正在创建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>

<%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/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">

“class=”img responsible“>

修复了它-问题在于行网格类。我删除了第二个[class*=“col-”]，第一张图片出现在正确的位置。谢谢！！

谢谢，不幸的是，这不起作用。我尝试将两个类都放在img标记后面，但都没有对齐第一张图片。您使用的是哪个引导版本我从网站下载了当前的版本，所以我相信它是4.0。由于应用程序将在没有internet连接的情况下运行，我没有使用CDNok，可能是不同的版本，因为img响应不再出现在4中，因为它更改为.img流体。最大宽度：100%；高度：自动；您可以查看它。对不起，我帮不了您多少忙。但是如果没有人帮助您，请告诉我，然后我可能会帮助您。

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