Html Bootstrap 5 网格问题，div 向下转义

我认为这是因为您没有用容器和行将列包围起来，如下所示:

<div class="container">
  <div class="row">
    <..... your columns here ....>
  </div>
</div>    

正是这些元素使Bootstrap列具有响应性.

列总是彼此接触，因为你为它们的背景着色，所以背景 colored颜色 也会接触.通过一点CSS，您可以防止这种情况:

.col-styling {
  height: 100px;
  margin-bottom: 1.5rem;
  background-color: green;
  background-clip: content-box;
}

其中将此样式应用于每一列.请参阅:https://codepen.io/kikosoft/pen/VwBZWQK

正是这background-clip: content-box;使这成为可能.它会导致背景不会绘制在填充边框的后面.有时非常有用的css属性.

使用Bootstrap时，这不是解决此问题的正常解决方案.通常情况下，您不会为列指定背景 colored颜色 ，该列只是一个框，您可以在其中放置内容.该内容可以有背景 colored颜色 ，如果您给它留出边距，则背景不会接触到.就像这样:

<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="content-styling">1</div>
    </div>  
    <div class="col-6">
      <div class="content-styling">2</div>
    </div>  
    <div class="col-6">
      <div class="content-styling">3</div>
    </div>  
    <div class="col-6">
      <div class="content-styling">4</div>
    </div>  
    <div class="col-6">
      <div class="content-styling">5</div>
    </div>  
    <div class="col-6">
      <div class="content-styling">6</div>
    </div>  
    <div class="col-6">
      <div class="content-styling">7</div>
    </div>  
  </div>
</div>    

然后设置内容样式，如下所示:

.content-styling {
  height: 100px;
  margin-bottom: 1.5rem;
  background-color: green;
}

请参阅:https://codepen.io/kikosoft/pen/RwBbMoR