5 адаптивных карт в строке с bootstrap 4

Question

Возможно, я задаю вопрос, который уже был задан, но мне не удалось найти четкое решение и приспособиться к моему делу:

Я использую bootstrap 4 и хочу отобразить mov ie плакаты с использованием сетки, но я хотел бы отображать 5 элементов в строке, как на изображении ниже, я могу отобразить 6 элементов, 4 элемента, но не могу сделать это для 5 элементов.

Пример

Каждый элемент использует компонент карты bootstrap, который я настроил.

Я указываю, что элементы генерируются динамически с использованием al oop и что это возможно удалить один из элементов, чтобы мне не пришлось разбивать свою сетку, если я удаляю элемент.

Спасибо за вашу помощь и ваши ответы.

Answer 1

В последних Bootstrap> = 4.4 : Используйте новые классы row-cols-* Добавьте row-cols-5 к вашим row содержащим элементам. Так что не нужно настраивать CSS необходимо .
Если вы хотите перейти на экран Extra Large + Large + Medium + Small, как вам нужно, используйте row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 в row.

Bootstrap 4.4 do c здесь: https://getbootstrap.com/docs/4.4/layout/grid/#row -колонки

Примечание : отметьте фрагмент ниже Full Page, затем вы можете увидеть 5 столбцов и изменить размер браузера, затем вы также можете увидеть breaking columns.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container-fluid mb-4">
  <div class="row justify-content-center row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5">
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/7fec59/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/f9d737/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/81f0f4/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/a1adfa/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/f86f6f/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/ed7d31/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/a5a5a5/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/ffc000/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/5b9bd5/FFFFFF" alt="...">
      </div>
    </div>
  </div>
</div>

Answer 2

используйте это: (смещение одного из столбцов)

    <div class="row">
        <div class="col-md-2 offset-md-1">
            <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title 11</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="col-md-2 ">
            <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
    </div>