我的菜单项没有完全着色。

Question

我正在使用引导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

将所有填充从您的p-0)

• Add元素中移除(您可以为它们提供一个(d-flex w-100 align-items-center justify-content-between container-fluid theme-bg)

类，将其填充到直接子(d-flex w-100 align-items-center justify-content-between container-fluid theme-bg)中。

为我做了这件事，希望它有帮助:)