html - Bootstrap 4 六个盒子在同一行(响应式)？

Question

如何在同一行上制作六个盒子，并且它们之间有间距？

我已经尝试了所有方法，但为了获得它们之间的边距，我不得不使用非常负的边距并且设计没有响应:(

我在这里留下一个我想要的例子

Answer 1

尝试使用 Bootstrap 网格结构:

.content {
  border: 4px solid black;
  width: 100%;
  height: 100px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
  
<div class="container">
  <div class="row">
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
  </div>
</div>