Question

我正在使用mongoDB处理Magic：The 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属性的问题。它只是忽略了它。

Answer 1

当我的评论解决了这个问题时，我会把它写成答案。

在Bootstrap中，当包装卡片和媒体对象以及其他一些功能时，可能会遇到内容高度不均匀的问题，导致明显跳过的项目。要纠正这个问题，可以规范项目的高度，或引入CSS规则以确保卡片始终高于最高的内容。

例如，如果图像一般是400px高，但有些图像是一两个，你可能会考虑填充和文本高度（如果它变为两行可能会有所不同）并添加以下CSS规则：< / p>

.thumbnail {
    height: 500px
}

每一对行引导网格都缺少左边的Div

1 个答案: