我的菜单项没有完全着色

Question

我正在使用 bootstrap 5。背景颜色工作正常，但我认为这也有问题，但现在我的主要问题是菜单按钮没有完全着色。只有中间部分有颜色，填充物没有。我尝试过使用背景剪辑，但这也不起作用。

HTML

<div class="theme-bg offcanvas offcanvas-start" tabindex="-1" id="offcanvasLeft" aria-labelledby="offcanvasLeftLabel" style="background-color: #7bed9f;">
    <div class="offcanvas-header justify-content-end">
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-header d-flex flex-column justify-content-center">
        <img class="profile mb-2" src="{% static 'images/profile-default.png' %}">
        <h2 class="text-center ">Welcome Saif</h2>
    </div>
    <hr class="m-0">
    <div class="offcanvas-body p-0 container-fluid list-group list-group-flush border-bottom">
        <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
            <div class="d-flex w-100 align-items-center justify-content-between container-fluid theme-bg">
                <p class="mb-1 fs-6"><i class="fa fa-home me-1"></i> Home </p>
            </div>
        </a>
        <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
            <div class="d-flex w-100 align-items-center justify-content-between theme-bg">
                <p class="mb-1 fs-6"><i class="fa fa-search me-1"></i> Search </p>
            </div>
        </a>
        <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
            <div class="d-flex w-100 align-items-center justify-content-between theme-bg">
                <p class="mb-1 fs-6"><i class="fa fa-pencil me-1"></i> Write your blog </p>
            </div>
        </a>
        <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
            <div class="d-flex w-100 align-items-center justify-content-between theme-bg">
                <p class="mb-1 fs-6"><i class="fa fa-briefcase me-1"></i> Portfolio </p>
            </div>
        </a>
        <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
            <div class="d-flex w-100 align-items-center justify-content-between theme-bg">
                <p class="mb-1 fs-6"><i class="fa fa-gear me-1"></i> Settings </p>
            </div>
        </a>
        <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
            <div class="d-flex w-100 align-items-center justify-content-between theme-bg">
                <p class="mb-1 fs-6"><i class="fa fa-sign-out me-1"></i> Sign Out </p>
            </div>
        </a>
    </div>
</div>

CSS

.theme-bg {
    background-color: #7bed9f;
   padding: 0px;
    background-clip: padding-box;
}

菜单项未完全着色

Answer 1

1. 从 list-group-item 元素中删除所有填充（您可以通过为它们提供 p-0 类来完成此操作）
2. 将填充添加到直接子元素 (d-flex w-100align-items-center justify-content-aftercontainer-fluidtheme-bg）

这对我来说是这样，希望它有帮助:)