在 Bootstrap 5 中的列之间添加排水沟

Question

我正在尝试在 Bootstrap 5 中的列之间添加装订线。我按照文档说明了如何实现它，但由于某种原因，我无法在我的列之间添加装订线。

我正在使用g-3 为我的行添加排水沟，根据文档，这应该在我的行和列之间添加排水沟。我试过使用gap-3，但它会将第 3 列移到下一行。

我在这里错过了什么？

<div class="container">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 text-center g-3">
            <div class="col-12">
                <h1>Services</h1>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
            </div>
            <div class="col bg-white border rounded p-3">
                <img class="rounded-circle" src="#" alt="#">
                <h4>Title Here</h4>
                <p>Some more info here</p>
            </div>
            <div class="col bg-white border rounded p-3">
                <img src="#" alt="#">
                <h4>Title Here</h4>
                <p>Some more info here</p>
            </div>
            <div class="col bg-white border rounded p-3">
                <img src="#" alt="#">
                <h4>Title Here</h4>
                <p>Some more info here</p>
            </div>
            <div class="col bg-white border rounded p-3">
                <img src="#" alt="#">
                <h4>Title Here</h4>
                <p>Some more info here</p>
            </div>
            <div class="col bg-white border rounded p-3">
                <img src="#" alt="#">
                <h4>Title Here</h4>
                <p>Some more info here</p>
            </div>
            <div class="col bg-white border rounded p-3">
                <img src="#" alt="alt text">
                <h4>Title Here</h4>
                <p>Some more info here</p>
            </div>
        </div>
</div>

Answer 1

所以这个问题是我必须在我的 col div 中创建另一个 div，它应该有 bg-white border rounded p-3 的类，它不应该在 col div 中。

检查下面的代码。

我换了这个

<div class="col bg-white border rounded p-3">
     <img class="rounded-circle" src="#" alt="#">
     <h4>Title Here</h4>
     <p>Some more info here</p>
</div>

有了这个

<div class="col">
    <div class="bg-white border p-3">
         <img src="#" alt="alt text">
         <h4>Title Here</h4>
          <p>Some more info here</p>
    </div>
</div>

Answer 2

您的第一列占据了整行 - 所有 12 列。如果您将第一列更改为<div class=“col”>，它会给出您想要的吗？