Html 试着用bootsrtap制作16个正方形，但它不起作用，我不知道为什么

我正在尝试使用bootstrap在我的网站上制作16个方块，但它不起作用，我不知道为什么。我使用了“col-xs-3”，但它没有设置宽度，请帮助

PS（当然我可以在CSS中设置宽度，但我不应该这样做）

---

预期的输出将是16个正方形，每个正方形的宽度为25%，高度为12.5rem，这是因为您没有在

列中写入任何文本。我只是写了一些文字，它会有列显示。看这里，我在这里生成了一个
 如果expexted输出为16个框，则为卡提供一些宽度

.card{
    height: 12.5rem;
    width: 30px;
    background-color: rgb(153, 153, 153);
    border: 1px solid black;
    border-radius: 8px;
}

如果您想在一行中使用相同宽度的十六个方框，请在计算中提供宽度：

.card{
  width: calc(100% / 16)
  height: 12.5rem;
  background-color: rgb(153, 153, 153);
  border: 4px solid #fff;
  border-radius: 8px;
}

引导程序4中不再使用-xs-infix

这是所有设备宽度上的16个卡盒

<div class="row">
  <div class="col-3"><div class="card">1</div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">16 </div></div>
</div>


1.
.. 
.. 
.. 
.. 
.. 
.. 
.. 
.. 
.. 
.. 
.. 
.. 
.. 
.. 
16


相关：
该死，好吧，我不知道。谢谢这件事确实有帮助，我想其他人都不明白
.card{
  width: calc(100% / 16)
  height: 12.5rem;
  background-color: rgb(153, 153, 153);
  border: 4px solid #fff;
  border-radius: 8px;
}

<div class="row">
  <div class="col-3"><div class="card">1</div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">16 </div></div>
</div>