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

【问题标题】：Bootstrap 4 match grid columns size in different blocksBootstrap 4匹配不同块中的网格列大小
【发布时间】：2021-09-30 18:51:42
【问题描述】：

这是我需要实现的布局：

与大小匹配的列用绿色标记。我无法修复列大小，它们必须保持响应。我试图在块 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>

【问题讨论】：

您也可以发布您的尝试吗？我们将通过MRE 为您提供更好的帮助
哪个版本？..
版本为 Bootstrap 4
已添加代码尝试
您需要将 min-width 重置为该 col 以便它进行调整。 col-8 可以变成 col 以避免弄乱它。 col-2 在一行 10 中，而不是 12 变成 20% element 。你可以试试这个：jsfiddle.net/x0q8p5co

标签： css twitter-bootstrap grid

【解决方案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>

【讨论】：