带引导程序的卡之间的边距

Question

我有一些带有引导程序的卡片，我希望留有余量...我希望卡片在宽度上均匀分布。

基本上，你可以看到右边有红色，但我希望没有......

感谢您的帮助

.azer {
  background: red;
}

.card-annuaire {
  background: green;
  border: 0;
  border-radius: 0;
  margin-right: 1rem;
}

.card-annuaire .card-body {
  text-align: center;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-center my-5">
    <div class="col-12">
      <div class="qsdf" >
        <div class="azer">
          <div class="col-md-12">
            <div class="row g-0">
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

你可以在这里看到：https://codepen.io/zazzou/pen/abYdZQL

Answer 1

您需要从.card-annuaire 中删除边距，如下所示：

.card-annuaire {
      background:green;
            border:0;
            border-radius: 0;
            .card-body {
                text-align: center;
            }

.azer {
  background: red;
}

.card-annuaire {
  background:green;
        border:0;
        border-radius: 0;
        .card-body {
            text-align: center;
        }
    }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-center my-5">
    <div class="col-12">
      <div class="qsdf" >
        <div class="azer">
          <div class="col-md-12">
            <div class="row g-0">
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>