html - 如何创建一个由 14 个 div 组成的网格，占据整个浏览器屏幕宽度，并使用 html、css(也许还有 bootstrap4)在组之间使用分隔线？

Question

我想创建两行占据整个屏幕宽度的 div(每行总共 14 个)。所有 div 都是固定的且大小相等，并按颜色“分组”，每个颜色组之间有分隔符。

我想这样做，这样我就可以拥有占据屏幕整个宽度且彼此等距的“div”。有没有办法在不为每个 div 设置固定宽度的情况下在 bootstrap 4 中执行此操作？

假设:

1. 无论用户的浏览器屏幕有多宽，div 的大小都是相等的。调整大小仍然保持每行相同的 div 数量。 (没有将容器宽度明确设置为特定 px 宽度。高度没问题，例如 200px)
2. 确保示例中相同颜色的 div 位于同一组(绿色、蓝色和橙色)。
3. 有分隔线(示例图像中为黑色)来划分组。
4. 可扩展以支持添加更多 div。 (假设我想再添加 2 个橙色 div，我应该能够做到这一点而无需调整每个其他方 block 的百分比等。
5. 如果用作解决方案的一部分，则不会修改或覆盖开箱即用的 Bootstrap 类，但可以指定其他自定义类。

不确定是否可以使用 bootstrap 4 或当前的 css 标准来帮助解决这个问题。

我目前的部分解决方案是创建 12 个单独的 div 并向左浮动并留有边距。虽然问题是，当我调整屏幕大小时，一些 div 可能会转到第一行，在下面留下空隙我知道我可以明确地将 100 除以 7(行中 div 的数量)并将其用作所有 div 的百分比宽度div，但它看起来很笨拙，并在容器的最右侧留下空白。我也不确定如何添加黑色分隔线。

我正在寻找一种更智能(也许更现代？)的实现方式。 bootstrap 4 对此有帮助吗？

我目前的做法(没有黑色分隔线，不知道如何将它们放入): https://codepen.io/anon/pen/gvKaLW

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      <div class="rect green">1</div>
      <div class="rect green">2</div>
      <div class="rect blue">5</div>
      <div class="rect blue"></div>
      <div class="rect blue"></div>
      <div class="rect orange">11</div>
      <div class="rect orange"></div>
      <div class="rect green">3</div>
      <div class="rect green">4</div>
      <div class="rect blue"></div>
      <div class="rect blue"></div>
      <div class="rect blue"></div>      
      <div class="rect orange"></div>
      <div class="rect orange"></div>
    </div>
  </div>
</div>

CSS

.rect {
  background: green;
  width:12%;
  height:200px;
  float:left;
  margin-right:10px;
  margin-top:5px;
  color:white;
  font-size:3em;
}

.green {
  background:green;
}

.blue {
  background:blue;
}

.orange {
  background:orange;
}

Answer 1

我能想到的唯一 Bootstrap 4 方法是使用 7 个 col 自动布局列，然后将 rect 嵌套在其中。最后使用 :after 元素作为分隔符。

https://www.codeply.com/go/D4l7mCFeMr

<div class="container-fluid">
    <div class="row no-gutters">
        <div class="col">
            <div class="rect green">1</div>
            <div class="rect green">3</div>
        </div>
        <div class="col">
            <div class="rect green">2</div>
            <div class="rect green">4</div>
        </div>
        <div class="col">
            <div class="rect blue">5</div>
            <div class="rect blue"></div>
        </div>
        <div class="col">
            <div class="rect blue"></div>
            <div class="rect blue"></div>
        </div>
        <div class="col">
            <div class="rect blue"></div>
            <div class="rect blue"></div>
        </div>
        <div class="col">
            <div class="rect orange"></div>
            <div class="rect orange"></div>
        </div>
        <div class="col">
            <div class="rect orange"></div>
            <div class="rect orange"></div>
        </div>

    </div>
</div>