消除循环生成的div之间的空白

如果您在引导程序中 row 并且只是使用 col-* 元素,则空白应该根本不重要。您的代码示例中缺少了一些引号,这可能会把事情搞砸,但我不知道这是您的问题中的拼写错误还是实际的代码输出。

当报价固定并放入 一行 我看不出您提供的两个代码示例之间有任何问题,甚至没有任何差异

div[class^="col-"]{
  background: #CCC;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="row">
  <!-- THIS WORKS -->
  <div class="col-4">
      1
  </div><div class="col-4">
      2
  </div><div class="col-4">
      3
  </div>
</div>

<br/><br/>

<div class="row">
  <!-- THIS DOESN'T WORK -->
  <div class="col-4">
      1
  </div>
  <div class="col-4">
      2
  </div>
  <div class="col-4">
      3
  </div>
</div>

很奇怪,如果在循环中生成列div,那么您想要指定列宽的原因有充分的理由吗?通过使用 col-4 类,每次只能循环3个项目(除非修改默认值 $grid-columns 当然,设置为大于12),并且由于您在本例中顽固地期望这些div的宽度相等, 你还不如用 col 而是让div自动格式化 。

这样做应该将所有元素保持在同一行:

<div class="row">
  <div class="col">
    <!-- content -->
  </div>
  <div class="col">
    <!-- content -->
  </div>
  <div class="col">
    <!-- content -->
  </div>
</div>

我不认为空白/换行有什么区别。。。但听起来确实像是聚合列宽超过了最大网格列,尽管情况并非如此(再次假设默认值 $grid列 Sass变量值未减少)。

或者(或者另外),您可以尝试为容器使用内联flex显示类,如下所示:

<div class="d-inline-flex flex-row">
 <div class="col">
   <!-- content -->
 </div>
 <div class="col">
   <!-- content -->
 </div>
 <div class="col">
   <!-- content -->
 </div>
</div>