Question

我可能会问一个已经提出的问题，但是我没有找到一个明确的解决方案并适应我的情况：

我使用bootstrap 4，我想使用网格显示电影海报，但我想每行显示5个项目，如下图所示，我可以显示6个项目，但4个项目却不能执行它有5个项目。

每个项目都使用我自定义的引导卡组件。

我指定这些项目是使用循环动态生成的，并且可以删除其中一个项目，因此，如果我删除项目，则不必破坏网格。

感谢您的帮助和解答。

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文档在这里：https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

注意：检查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>

带有引导程序的每行5张响应式卡片

2 个答案: