Bootstrap 4 中的 col-md-4 属性在我的 ejs 文件中不起作用

Question

  <div class="container"> 

    <div class="row card-deck">

    <% for(var i=0;i<campgrounds.length;i++){ %>

        <div class="card col-12 col-md-4">

        <img class="card-image-top" src="<%= campgrounds[i].image %>"  style=width:100%;height:350px;>

        <div class="card-body">

        <h3 class="card-title"><%= campgrounds[i].name %></h3> 

            </div>

        </div>

    <% }%>

</div>

</div>

这里“campgrounds”是一个具有 2 个属性（“name”和图像源）的字典数组。现在这个数组有 6 个项目，我的 col-md-4 应该以中等及以上的分辨率连续给出 3 个项目。但是，这不起作用，在大/中分辨率下，单行中有 12 个项目。为什么？

Answer 1

.cardBootstrap 有自己的 flex 属性，可以覆盖.col-*您需要将.card其添加为子 div .col-md-4，然后您将看到结果。.col-md-4{ margin: 20px auto; } /* Or use my-* classes */<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /><div class="container">&nbsp; <div class="row card-deck">&nbsp; &nbsp; <div class="col-md-4">&nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; <img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="card-title">Card Title</h3>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-md-4">&nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; <img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="card-title">Card Title</h3>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-md-4">&nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; <img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="card-title">Card Title</h3>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-md-4">&nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; <img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="card-title">Card Title</h3>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-md-4">&nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; <img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="card-title">Card Title</h3>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-md-4">&nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; <img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="card-title">Card Title</h3>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>