Bootstrap Card / Карты-колонки взлома

Question

Мне нужна помощь в решении этой головоломки.При использовании карточных столбцов и карточек в начальной загрузке 4.1 строка обрывается, когда я этого не хочу.У меня есть счетчик столбцов, установленный на 4, и когда есть 4 карты, это выглядит идеально.Когда пятая карта добавлена, она разбивает ряд на 3 карты сверху и 2 снизу.Кто-нибудь знает, как исправить это.Я включил скриншот всех моих строк ниже, разбит на 2 раздела.Во втором разделе «Переходный период» проблема возникает в настоящее время.

Я поиграл с тем, чтобы вдовам и сиротам было присвоено значение unset, но это не сработало.Карты установлены на встроенный блок.

Мой код здесь: https://jsfiddle.net/alecruckus/1savgxjm/10/

</div>

Answer 1

Здесь вы можете найти «проблему»: https://getbootstrap.com/docs/4.0/components/card/

Карты могут быть организованы в Masonry-подобные столбцы только с помощью CSS, оборачивая их в .card-столбцы.Карты создаются со свойствами столбцов CSS вместо flexbox для более удобного выравнивания. Карты располагаются сверху вниз и слева направо.

Если есть место, карты сначала упорядочиваются сверху вниз, затем слева направо.Вы можете точно понять порядок, используя цифры ( Я использовал стандартную кол-во столбцов Boostrap ):

<div class="container">
  <h1>First Set of 4</h1>
  <div class="card-columns">
    <!-- Cabinet 1 -->
    <div class="card">
      <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
      <p>Color <b>1</b></p>
      <p>Model</p>
    </div>
    <!-- Cabinet 2 -->
    <div class="card">
      <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
      <p>Color <b>2</b></p>
      <p>Model</p>
    </div>
    <!-- Cabinet 3 -->
    <div class="card">
      <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
      <p>Color <b>3</b></p>
      <p>Model</p>
    </div>
    <!-- Cabinet 4 -->
    <div class="card">
      <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
      <p>Color <b>4</b></p>
      <p>Model</p>
    </div>
  </div>
</div>

<div class="container">
  <h1>Second Set of 5</h1>
  <div class="card-columns">
    <!-- Cabinet 1 -->
    <div class="card cabinet">
      <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
      <p>Color <b>1</b></p>
      <p>Model</p>
    </div>
    <!-- Cabinet 2 -->
    <div class="card cabinet">
      <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
      <p>Color <b>2</b></p>
      <p>Model</p>
    </div>
    <!-- Cabinet 3 -->
    <div class="card cabinet">
      <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
      <p>Color <b>3</b></p>
      <p>Model</p>
    </div>
    <!-- Cabinet 4 -->
    <div class="card cabinet">
      <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
      <p>Color <b>4</b></p>
      <p>Model</p>
    </div>
    <!-- Cabinet 5 -->
    <div class="card cabinet">
      <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
      <p>Color <b>5</b></p>
      <p>Model</p>
    </div>
  </div>
</div>

    <!-- Optional JavaScript -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Итак, у вашего кода нет проблем: это правильная работа column-count: если карточек много, вы не замечаете «проблему» пустого пространства.

Если вы хотите расположение в строке (то есть ПЕРВЫЙ слева направо, ТО сверху вниз), вы можете использовать обычный класс начальной загрузки col-xx-xx:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="container">
    <h1>First Set of 4</h1>
    <div class="row">
        <div class="col-sm-3">
            <!-- Cabinet 1 -->
            <div class="card cabinet mb-3">
                <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
                <p>Color <b>1</b></p>
                <p>Model</p>
            </div>
        </div>
        <div class="col-sm-3">
            <!-- Cabinet 2 -->
            <div class="card cabinet mb-3">
                <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
                <p>Color <b>2</b></p>
                <p>Model</p>
            </div>
        </div>
        <div class="col-sm-3">
            <!-- Cabinet 3 -->
            <div class="card cabinet mb-3">
                <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
                <p>Color <b>3</b></p>
                <p>Model</p>
            </div>
        </div>
        <div class="col-sm-3">
            <!-- Cabinet 4 -->
            <div class="card cabinet mb-3">
                <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
                <p>Color <b>4</b></p>
                <p>Model</p>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <h1>Second Set of 5</h1>
    <div class="row">
        <div class="col-sm-3">
            <!-- Cabinet 1 -->
            <div class="card cabinet mb-3">
                <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
                <p>Color <b>1</b></p>
                <p>Model</p>
            </div>
        </div>
        <div class="col-sm-3">
            <!-- Cabinet 2 -->
            <div class="card cabinet mb-3">
                <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
                <p>Color <b>2</b></p>
                <p>Model</p>
            </div>
        </div>
        <div class="col-sm-3">
            <!-- Cabinet 3 -->
            <div class="card cabinet mb-3">
                <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
                <p>Color <b>3</b></p>
                <p>Model</p>
            </div>
        </div>
        <div class="col-sm-3">
            <!-- Cabinet 4 -->
            <div class="card cabinet mb-3">
                <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
                <p>Color <b>4</b></p>
                <p>Model</p>
            </div>
        </div>
        <div class="col-sm-3">
            <!-- Cabinet 5 -->
            <div class="card cabinet mb-3">
                <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt="">
                <p>Color <b>5</b></p>
                <p>Model</p>
            </div>
        </div>
    </div>
</div>