Свойство col-md-4 в bootstrap 4 не работает в моем файле e js

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 свойствами ("имя" и источник изображения). Теперь в этом массиве есть 6 элементов, и мой col-md-4 должен давать 3 элемента подряд в разрешениях от среднего и выше. Но это не работает, и в большом ряду 12 элементов в одной строке. Почему?

Answer 1

.card в Bootstrap имеет свои собственные свойства 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>