特定 div 没有装订线空间

Question

参考带有文本“为什么没有装订线空间？”的 div。为什么一行中这两个特定的 div 之间没有装订线空间？我尝试将 gx-2 添加到父行，但它仍然没有在这两列之间添加空间。在整个页面上运行代码片段以更好地查看问题。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row text-white">
            <div class="col-md-9">
                <div class="row mb-3">
                    <div class="col-md-8 bg-dark opacity-25">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, ab neque ex repellat
                            voluptatum rerum, sequi asperiores nulla fugiat, cum quis ut! Pariatur esse, dolor at omnis
                            ducimus magni aperiam.</p>
                    </div>
                    <div class="col-md-4">
                        <div class="col-md-12 bg-dark opacity-25">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, ab neque ex repellat
                                voluptatum rerum, sequi asperiores nulla </p>
                        </div>
                        <div class="col-md-12 bg-dark opacity-25">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, ab neque ex repellat
                                voluptatum rerum, sequi asperiores nulla </p>
                        </div>
                    </div>

                </div>
                <div class="row mb-3">
                    <div class="col-md-5 bg-dark opacity-25 ">
                        <p>why no gutter space for this? </p>
                    </div>
                    <div class="col-md-7 bg-dark opacity-25 ">
                        <p>why no gutter space for this?  </p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 bg-dark opacity-25">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, ab neque ex repellat voluptatum
                    rerum,
                    sequi asperiores nulla </p>
            </div>
        </div>

Answer 1

避免在 Bootstrap 列中使用背景颜色，它们会覆盖列之间的装订线空间。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row g-2 text-white">
  <div class="col-md-9">
    <div class="row g-2">
      <div class="col-md-8">
        <p class="bg-dark opacity-25">Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, ab neque ex repellat
          voluptatum rerum, sequi asperiores nulla fugiat, cum quis ut! Pariatur esse, dolor at omnis
          ducimus magni aperiam. 8</p>
      </div>
      <div class="col-md-4">
        <div class="row g-2">
          <div class="col-md-12">
            <p class="bg-dark opacity-25">Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, ab neque ex repellat
              voluptatum rerum, sequi asperiores nulla 12 </p>
          </div>
          <div class="col-md-12">
            <p class="bg-dark opacity-25">Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, ab neque ex repellat
              voluptatum rerum, sequi asperiores nulla 12 </p>
          </div>
        </div>
      </div>
    </div>
    <div class="row g-2">
      <div class="col-md-5">
        <p class="bg-dark opacity-25">why no gutter space for this? </p>
      </div>
      <div class="col-md-7">
        <p class="bg-dark opacity-25">why no gutter space for this?  </p>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <p class="bg-dark opacity-25">Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, ab neque ex repellat voluptatum
      rerum, sequi asperiores nulla 3 </p>
  </div>
</div>