Html 如何使用col-sm-3将5张卡保持在同一行

嘿，伙计们，我目前正在用HTML编写卡片，我正在尝试将5张卡片放在同一行中，而不打断新的一行

<div class="row no-gutters">
   <div class="col-sm-3"> Card 1 </div>
   <div class="col-sm-3"> Card 2 </div>
   <div class="col-sm-3"> Card 3 </div>
   <div class="col-sm-3"> Card 4 </div>
   <div class="col-sm-3"> Card 5 </div>
</div>

我尝试使用col-sm-2，但它对于卡中的内容来说太小了

我不能删除左边和右边的边框吗？我以为没有排水沟会这样。我想将第二行中的卡带到第一行。

如果使用，您可以简单地使用col或col-[breakpoint]来表示等宽列：

<div class="row no-gutters">
   <div class="col-sm"> Card 1 </div>
   <div class="col-sm"> Card 2 </div>
   <div class="col-sm"> Card 3 </div>
   <div class="col-sm"> Card 4 </div>
   <div class="col-sm"> Card 5 </div>
</div>

---

有时候引导不是最好的方法。试试flexbox。这很容易

.行{ 显示器：flex； 证明内容：之间的空间； } .col-sm-3{ 边框：实心1px黑色； 宽度：100%； } 卡1 卡2 卡片3 卡4 卡片5

---

Column类表示每行可能使用的12列中的列数。尝试阅读更多有关网格系统的信息，这里是

嘿！我试过了，但仍然有差距，是因为col-sm-3中的内容吗？不，我们可以消除差距。给我一两分钟，我将更新更新的代码段。如果对你有效，请告诉我。