bootstrap Nesting grids in row-col combined with gutters deforms the nested columns in width

h43kikqp 于 5个月前发布在 Bootstrap

关注(0)|答案(3)|浏览(78)

前提条件

我有一个用于重复或关闭问题的searched
我有一个避免常见问题的HTML validated
我阅读了contributing guidelines

描述问题

以下代码似乎基于文档在理论上是正确的，但结果外观与预期不符。

<div class="container pt-5">
  <div class="row row-cols-2 g-2">
    
      <div class="col border">
        <div class="row border border-warning">
          <div class="col py-4 border border-success"></div>
          <div class="col py-4 border border-danger"></div>
        </div>
      </div>
    
      <div class="col border">
        <div class="row border border-warning">
          <div class="col py-4 border border-success"></div>
          <div class="col py-4 border border-danger"></div>
        </div>
      </div>
    
      <div class="col border">
        <div class="row border border-warning">
          <div class="col py-4 border border-success"></div>
          <div class="col py-4 border border-danger"></div>
        </div>
      </div>
    
      <div class="col border">
        <div class="row border border-warning">
          <div class="col py-4 border border-success"></div>
          <div class="col py-4 border border-danger"></div>
        </div>
      </div>
    
  </div>
</div>

上述代码产生了以下视觉效果：

简化测试用例

https://codepen.io/Sojaner/pen/eYPXaMJ

您在哪个操作系统上看到了问题？

Windows

您在哪个浏览器上看到了问题？

Chrome, Firefox, Edge

您使用的Bootstrap版本是什么？

v5.2.3

Bootstrap

来源：https://github.com/twbs/bootstrap/issues/38651

3条答案

按热度按时间

o2g1uqev1#

我可以通过将代码更改为以下内容来解决这个问题，其中在两个不同的地方应用了边距。

<div class="container pt-5">
  <div class="row row-cols-2 gy-2">
    
      <div class="col border">
        <div class="row gx-3 border border-warning">
          <div class="col py-4 border border-success"></div>
          <div class="col py-4 border border-danger"></div>
        </div>
      </div>
    
      <div class="col border">
        <div class="row gx-3 border border-warning">
          <div class="col py-4 border border-success"></div>
          <div class="col py-4 border border-danger"></div>
        </div>
      </div>
    
      <div class="col border">
        <div class="row gx-3 border border-warning">
          <div class="col py-4 border border-success"></div>
          <div class="col py-4 border border-danger"></div>
        </div>
      </div>
    
      <div class="col border">
        <div class="row gx-3 border border-warning">
          <div class="col py-4 border border-success"></div>
          <div class="col py-4 border border-danger"></div>
        </div>
      </div>
    
  </div>
</div>

https://codepen.io/Sojaner/pen/ZEqPNqW
然而，仍然存在一种异常行为，即在嵌套的 row 上，边距越小(gx-0、gx-1等),间隙就越大。

<div class="container pt-5">
  <div class="row row-cols-2 gy-2">
    
      <div class="col border">
        <div class="row gx-3 border border-warning">
          <div class="col py-4 border border-success"></div>
          <div class="col py-4 border border-danger"></div>
        </div>
      </div>
    
      <div class="col border">
        <div class="row gx-2 border border-warning">
          <div class="col py-4 border border-success"></div>
          <div class="col py-4 border border-danger"></div>
        </div>
      </div>
    
      <div class="col border">
        <div class="row gx-1 border border-warning">
          <div class="col py-4 border border-success"></div>
          <div class="col py-4 border border-danger"></div>
        </div>
      </div>
    
      <div class="col border">
        <div class="row gx-0 border border-warning">
          <div class="col py-4 border border-success"></div>
          <div class="col py-4 border border-danger"></div>
        </div>
      </div>
    
  </div>
</div>