Bootstrap 5 - 如何连续堆叠 6 张卡片？
Boostrap 5 - how to stack 6 cards in a row?
我试图在同一行制作 6 张卡片，但每次我添加第 4 张依此类推时，都会发生这种情况：enter image description here
知道如何解决这个问题吗？我相信它很简单，下面是我的代码。
提前致谢。
(看起来你的 post 主要是代码；请再添加一些 details.It 看起来你的 post 主要是代码；请再添加一些 details.It 看起来就像您的 post 大部分是代码；请添加更多详细信息。）
Zakres usług
<div class="row">
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img
src="https://mdbootstrap.com/img/new/standard/nature/023.jpg"
class="img-fluid"
/>
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<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>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img
src="https://mdbootstrap.com/img/new/standard/nature/023.jpg"
class="img-fluid"
/>
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<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>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img
src="https://mdbootstrap.com/img/new/standard/nature/111.jpg"
class="img-fluid"
/>
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<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>
</div>
</div>
</div>
</div>
</section>
<div class="row">
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<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>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<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>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/111.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<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>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<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>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<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>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/111.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<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>
</div>
</div>
</div>
</div>
我试图在同一行制作 6 张卡片，但每次我添加第 4 张依此类推时，都会发生这种情况：enter image description here
知道如何解决这个问题吗？我相信它很简单，下面是我的代码。 提前致谢。
(看起来你的 post 主要是代码；请再添加一些 details.It 看起来你的 post 主要是代码；请再添加一些 details.It 看起来就像您的 post 大部分是代码；请添加更多详细信息。）
Zakres usług <div class="row">
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img
src="https://mdbootstrap.com/img/new/standard/nature/023.jpg"
class="img-fluid"
/>
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<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>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img
src="https://mdbootstrap.com/img/new/standard/nature/023.jpg"
class="img-fluid"
/>
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<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>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img
src="https://mdbootstrap.com/img/new/standard/nature/111.jpg"
class="img-fluid"
/>
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<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>
</div>
</div>
</div>
</div>
</section>
<div class="row">
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<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>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<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>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/111.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<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>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<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>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<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>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/111.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<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>
</div>
</div>
</div>
</div>