我的菜单项没有完全着色

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

从您的 list-group-item 元素中删除所有填充（您可以通过给它们一个 p-0 的 class 来做到这一点）
将您的填充添加到直接子代 (d-flex w-100 align-items-center justify-content-between container-fluid theme-bg)

这对我有用，希望对你有帮助:)

我的菜单项没有完全着色

My menu items are not being colored completely

html

css

padding

flexbox

bootstrap-5