如何对齐嵌套的bootstrap flex元素

时间：2018-11-30 15:24:20

标签： css twitter-bootstrap css3 flexbox bootstrap-4

我在尝试对齐嵌套的bootstrap flex元素时遇到问题。

.mi-flex-group {
  width: 100%;
}

.block {
  background: #333;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  width: 100%;
}

.source {
  padding: 10px;
  width: 100%;
}

.source:nth-child(1) {
  background-color: lightgreen;
}

.source:nth-child(2) {
  background-color: #28a745;
}

.source:nth-child(3) {
  background-color: #ffc107;
}

.source:nth-child(4) {
  background-color: #dc3545;
}

.source:nth-child(5) {
  background-color: #007bff;
}

.source:nth-child(6) {
  background-color: brown;
}

.source:nth-child(7) {
  background-color: violet;
}

.source:nth-child(8) {
  background-color: darkviolet;
}

.source:nth-child(9) {
  background-color: orangered;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <table class="table table-bordered table-hover" style="overflow-x: auto;">
    <thead>
      <tr>
        <th></th>
        <th>COL A</th>
        <th>COL B</th>
        <th>COL C</th>
        <th>COL D</th>
        <th>COL E</th>
        <th>COL F</th>
        <th>COL G</th>
        <th>COL H</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>ROW 1</th>
        <td>
          <div class="d-flex mi-flex-group w-100">
            <div class="d-flex flex-column w-100">
              <div class="d-flex">
                <div class="p-1 block">BS</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
              </div>
            </div>
          </div>
        </td>
        <td>
          <div class="d-flex mi-flex-group w-100">
            <div class="d-flex flex-column mr-1 w-50">
              <div class="d-flex">
                <div class="p-1 block">BS</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
              </div>
            </div>
            <div class="d-flex flex-column w-50">
              <div class="d-flex">
                <div class="p-1 block">PK</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
              </div>
            </div>
          </div>
        </td>
        <td>
          <div class="d-flex mi-flex-group w-100">
            <div class="d-flex flex-column mr-1 w-50">
              <div class="d-flex">
                <div class="p-1 block">BS</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
              </div>
            </div>
            <div class="d-flex flex-column w-50">
              <div class="d-flex">
                <div class="p-1 block">PK</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
              </div>
            </div>
          </div>
        </td>
        <td>
          <div class="d-flex mi-flex-group w-100">
            <div class="d-flex flex-column mr-1 w-50">
              <div class="d-flex">
                <div class="p-1 block">BS</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
              </div>
            </div>
            <div class="d-flex flex-column w-50">
              <div class="d-flex">
                <div class="p-1 block">PK</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
              </div>
            </div>
          </div>
        </td>
        <td>
          <div class="d-flex mi-flex-group w-100">
            <div class="d-flex flex-column mr-1 w-50">
              <div class="d-flex">
                <div class="p-1 block">BS</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
              </div>
            </div>
            <div class="d-flex flex-column w-50">
              <div class="d-flex">
                <div class="p-1 block">PK</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
              </div>
            </div>
          </div>
        </td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th>ROW 2</th>
        <td>
          <div class="d-flex mi-flex-group w-100">
            <div class="d-flex flex-column w-100">
              <div class="d-flex">
                <div class="p-1 block">BS</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
              </div>
            </div>
          </div>
        </td>
        <td>
          <div class="d-flex mi-flex-group w-100">
            <div class="d-flex flex-column mr-1 w-50">
              <div class="d-flex">
                <div class="p-1 block">BS</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
                <div class="source" title="S5"></div>
                <div class="source" title="S6"></div>
                <div class="source" title="S7"></div>
                <div class="source" title="S8"></div>
                <div class="source" title="S9"></div>
              </div>
            </div>
            <div class="d-flex flex-column w-50">
              <div class="d-flex">
                <div class="p-1 block">PK</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
              </div>
            </div>
          </div>
        </td>
        <td>
          <div class="d-flex mi-flex-group w-100">
            <div class="d-flex flex-column mr-1 w-50">
              <div class="d-flex">
                <div class="p-1 block">BS</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
              </div>
            </div>
            <div class="d-flex flex-column w-50">
              <div class="d-flex">
                <div class="p-1 block">PK</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
              </div>
            </div>
          </div>
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

您可以在下一行重叠的 ROW 1 / COL D 和 ROW 2 / COL B 中看到效果。
enter image description here

我发现进行此调整的唯一方法是将padding更改为较低的值，例如5像素：

.source {
  padding: 5px;
  width: 100%;
}

但是它很小...
注意：想法是使此矩形“可点击” ...
enter image description here

关于如何正确解决此问题的任何建议？

0 个答案:

没有答案
相关问题
最新问题