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

  <div class="row card-deck">

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

      <div class="card">

        <img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">

        <div class="card-body">

          <h3 class="card-title">Card Title</h3>

        </div>

      </div>

    </div>

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

      <div class="card">

        <img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">

        <div class="card-body">

          <h3 class="card-title">Card Title</h3>

        </div>

      </div>

    </div>

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

      <div class="card">

        <img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">

        <div class="card-body">

          <h3 class="card-title">Card Title</h3>

        </div>

      </div>

    </div>

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

      <div class="card">

        <img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">

        <div class="card-body">

          <h3 class="card-title">Card Title</h3>

        </div>

      </div>

    </div>

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

      <div class="card">

        <img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">

        <div class="card-body">

          <h3 class="card-title">Card Title</h3>

        </div>

      </div>

    </div>

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

      <div class="card">

        <img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">

        <div class="card-body">

          <h3 class="card-title">Card Title</h3>

        </div>

      </div>

    </div>

  </div>

</div>