Bootstrap 4匹配不同块中的网格列大小

Question

这是我需要实现的布局：

​

​

匹配大小的列用绿色标记。我不能修复列的大小，它们必须保持响应。我曾尝试在块2中创建嵌套行，但无法匹配大小，因为嵌套行中的col-2与父行中的col-2不同...

尝试代码：

​

.row div {
  border: 1px solid black;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-6">
      col-6
    </div>
    <div class="col-2">
      col-2
    </div>
    <div class="col-2">
      col-2
    </div>
    <div class="col-2">
      col-2
    </div>
  </div>
</div>
<div class="w-100">&nbsp;</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-10">
      <div class="row">
        <div class="col-12">
          col-10
        </div>
      </div>
      <div class="row">
        <div class="col-10">
          col-10
        </div>
        <div class="col-2">
          col-2 ???
        </div>
      </div>
    </div>
    <div class="col-2">
      col-2
    </div>
  </div>
</div>

​

Answer 1

代码：

​

[class^="col"] {
  border: 1px solid grey;
}

.bg-green {
  background-color: #afd095;
}
.w-20{min-width:20%}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div>Block 1</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-6">
      col-6
    </div>
    <div class="col-2">
      col-2
    </div>
    <div class="col-2 bg-green ">
      col-2
    </div>
    <div class="col-2">
      col-2
    </div>
  </div>
</div>
<div>Block 2</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-10">
      <div class="row">
        <div class="col-12">
          col-10
        </div>
      </div>
      <div class="row">
        <div class="col">
          col-8
        </div>
        <div class="col-2 bg-green w-20">
          col-2
        </div>
      </div>
    </div>
    <div class="col-2">
      col-2
    </div>
  </div>
</div>

​